简单模板ng-repeat的使用

最新推荐文章于 2020-09-06 22:26:07 发布

yaya1286249672

最新推荐文章于 2020-09-06 22:26:07 发布

阅读量353

点赞数

文章标签： angular

本文链接：https://blog.csdn.net/yaya1286249672/article/details/54981009

版权

<!DOCTYPE html>
<html ng-app="phonecatApp">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/lib/angular/angular.min.js"></script>
    <style>
        li>span:first-child{color:red;font-size:22px;}
    </style>
</head>
<body ng-controller="PhoneListController">
<ul>
    <li ng-repeat="phone in phones">
        <span>{{phone.name}}</span>
        <span>{{phone.snippet}}</span>
    </li>
</ul>
<script>
    var app = angular.module("phonecatApp", []);

    app.controller("PhoneListController", function ph($scope) {
        $scope.phones = [
            {
                name: '【Nexus S】',
                snippet: 'Fast just got faster with Nexus S.'
            },
            {
                name: '【Motorola XOOM™ with Wi-Fi】',
                snippet: 'The Next, Next Generation tablet.'
            },
            {
                name: '【MOTOROLA XOOM™】',
                snippet: 'The Next, Next Generation tablet.'
            }
        ];
    });
</script>
</body>
</html>