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>
  • 相关阅读:
    为什么说 Java 程序员必须掌握 Spring Boot ?(转)
    Vert.x 之 HelloWorld
    Vert.x Web 文档手册
    Vert.x Core 文档手册
    Android数据存储五种方式总结
    设置简单的定时
    自定义dialog
    Android DrawerLayout 高仿QQ5.2双向侧滑菜单
    Fragments碎片
    理解Fragment生命周期
  • 原文地址:https://www.cnblogs.com/rysly/p/ng-repeat.html
Copyright © 2011-2022 走看看