[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 @   rysly  阅读(186)  评论(0)  编辑  收藏  举报
编辑推荐：
· 从问题排查到源码分析：ActiveMQ消费端频繁日志刷屏的秘密
· 一次Java后端服务间歇性响应慢的问题排查记录
· dotnet 源代码生成器分析器入门
· ASP.NET Core 模型验证消息的本地化新姿势
· 对象命名为何需要避免'-er'和'-or'后缀
阅读排行：
· “你见过凌晨四点的洛杉矶吗？”--《我们为什么要睡觉》
· 编程神器Trae：当我用上后，才知道自己的创造力被低估了多少
· C# 从零开始使用Layui.Wpf库开发WPF客户端
· C#/.NET/.NET Core技术前沿周刊 | 第 31 期（2025年3.17-3.23）
· 接口重试的7种常用方案！
点击右上角即可分享
微信分享提示