AngularJs之四

Posted 2020-08-25 @新时代的码砖工

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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 元素可见。