码迷,mamicode.com
首页 > Web开发 > 详细

[2015-10-28]Angularjs-----数据获取,关联

时间:2015-10-28 14:14:43      阅读:161      评论:0      收藏:0      [点我收藏+]

标签:

收藏:需加angular.js文件

<html >
<head>
    <title></title>
    <meta charset="utf-8"/>
    <style type="text/css">
        input {

            font-size:64px;
        }
    </style>
    <script src="angular.js"></script>
</head>
<body ng-app="app.demo">
    <div ng-controller="ListCtrl">
        <fieldset>
            <legend>users</legend>
            <ul>
                <li ng-repeat="user in users | orderBy: ‘weight‘">
                    <a href="#" ng-click="show(user.id)" >{{user.name}} {{user.weight}}</a>
                </li>
            </ul>
        </fieldset>

        <fieldset>
            <legend>user</legend>
            <div ng-show="user" >
                <h1>    {{user.name}}  </h1>
                <input type="text" ng-model="user.weight" />
            </div>
        </fieldset>
    </div>

<script type="text/javascript">
    var myApp = angular.module("app.demo", []);

    myApp.factory("Data", function(){
        return {users:[
            {id:0,name:"第一名",weight:100},
            {id:1,name:"第二名",weight:200},
            {id:2,name:"第三名",weight:300},
            {id:3,name:"第四名",weight:400},
            {id:4,name:"第五名",weight:500}
            ]};
        });

    myApp.controller("ListCtrl", ["$scope", "Data", function($scope, Data) {
        $scope.users = Data.users;
        $scope.show = function(id){
            $scope.user= Data.users[id];
        }
    }]);
</script>

</body>
</html>

 

[2015-10-28]Angularjs-----数据获取,关联

标签:

原文地址:http://www.cnblogs.com/rysly/p/ng-repeat.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!