angularJS（5）

時間 2019-11-19

原文原文鏈接

angularJS（5）

一，數據循環：特別要注意做用域javascript

使用ng-repeat指令。html

<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控制器java

1.AngularJS 應用程序被控制器控制。
2.ng-controller 指令定義了應用程序控制器。app

控制器使用方法：ide

<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）.post

三，DOM指令。url

1，ng-disabled指令：直接綁定應用程序數據到HTML的disabled屬性。spa

<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指令（隱藏元素）code

<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 元素可見。

轉

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。