zoukankan      html  css  js  c++  java
  • AngularJs之四

    一,数据循环:特别要注意作用域

    使用ng-repeat指令。

    <div ng-app="myApp" ng-controller="myCtrl">
        <ul>
            <li ng-repeat="x in names">{{x}}</li>
        </ul>
    </div>
    <script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
        $scope.names=["金角大王","银角大王","红孩儿"];
    });
    </script>

    二:angularJs控制器

    1.AngularJS 应用程序被控制器控制。
    2.ng-controller 指令定义了应用程序控制器。

    控制器使用方法:

    <div ng-app="myapp" ng-controller="myctrl">
        姓:<input type="text" ng-model="xing"><br>
            名:<input type="text" ng-model="ming">
            <h1>你的姓名是:{{xing+""+ming}}</h1>
        <h2>好孩子:{{aaa()}}</h2>
    </div>
    <script>
        var app=angular.module("myapp",[]);
        app.controller("myctrl",function($scope){
             $scope.xing="孙";
             $scope.ming="悟空";
             $scope.aaa=function(){
                return $scope.xing+$scope.ming+“喜欢吃香蕉";
            }
        })
    </script>

    接下来咱来解析一下这个案例:

    AngularJS 应用程序由 ng-app 定义。应用程序在 <div> 内运行。
    AngularJS 指令用于定义一个控制器:ng-controller="myctrl" 
    myctrl 函数是一个 JavaScript 函数。
    AngularJS 使用$scope 对象来调用控制器。
    在 AngularJS 中, $scope 是一个应用对象(属于应用变量和函数)。
    控制器的 $scope (相当于作用域、控制范围)用来保存AngularJS Model(模型)的对象。
    控制器在作用域中创建了两个属性 (xing 和 ming)。
    ng-model 指令绑定输入域到控制器的属性(xing 和 ming).

    三,DOM指令。

    1,ng-disabled指令:直接绑定应用程序数据到HTML的disabled属性。

    <body ng-app="myapp" ng-controller="mctrl">
            <input type="button" value="下一步" ng-disabled="!mm"/>
            <input type="checkbox" ng-model="mm"/>
            
        </body>
            <script type="text/javascript">
                var app=angular.module('myapp',[]);
                app.controller('mctrl',function ($scope) {});
            </script>

    2,ng-hide指令(隐藏元素)

    <body ng-app="myapp" ng-controller="myctrl">
            <input type="checkbox" ng-model="mm" />隐藏
            <div ng-hide="mm">
                <h4>八百标兵奔北坡</h4>
            </div>
        </body>
        <script type="text/javascript">
            var app=angular.module('myapp',[]);
            app.controller('myctrl',function ($scope) {})
        </script>

    3,ng-show指令:根据value的值来显示(隐藏)HTML元素;可以使用表达式来计算布尔值(true或false)。

    <body ng-app="myapp" ng-controller="myctrl">
            <input type="checkbox"  ng-model="mm"/>显示
            <div id="" ng-show="mm">
                <h2>窗前明月光</h2>
            </div>
        </body>
        <script type="text/javascript">
            var app=angular.module('myapp',[]);
            app.controller('myctrl',function ($scope) {})
        </script>

    4,angularJs显示隐藏

    (1)ng-hide 指令用于设置应用部分是否可见。
             ng-hide="true" 设置 HTML 元素不可见。
             ng-hide=“false” 设置 HTML 元素可见。
    (2)ng-show 指令可用于设置应用中的一部分是否可见 。
           ng-show="false" 可以设置 HTML 元素 不可见。 
           ng-show="true" 可以以设置  HTML 元素可见。

  • 相关阅读:
    Ubuntu16.04安装Docker、nvidia-docker
    Java 对象和类
    Java基础知识总结
    Java 学习路线
    编写radware的负载配置
    MySQL的主从复制+双主模式
    模拟MBR Grub故障修复
    搭建Nginx(haproxy)+keepalived+Tomcat双主高可用负载均衡
    golang数据库操作初体验
    我操蛋的2019
  • 原文地址:https://www.cnblogs.com/liulijun330/p/6234953.html
Copyright © 2011-2022 走看看