zoukankan      html  css  js  c++  java
  • [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>
  • 相关阅读:
    cookie和session学习笔记
    Listener和Filter学习笔记
    [转载]mysql root密码忘了怎么办
    [转载]oracle连不上的各种现象
    Oauth入门学习
    XML学习笔录
    共享内存
    守护进程
    Linux系统调用与文件I/O(一)
    我的第一篇博客
  • 原文地址:https://www.cnblogs.com/rysly/p/ng-repeat.html
Copyright © 2011-2022 走看看