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

收藏：需加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>

 

posted @ 2015-10-28 13:35  rysly  阅读(186)  评论(0)  编辑  收藏  举报