码迷,mamicode.com
首页 > Web开发 > 详细

angularJS(5)

时间:2017-01-01 15:28:28      阅读:187      评论:0      收藏:0      [点我收藏+]

标签:分享   数据   image   name   部分   control   bsp   tool   dom   

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

使用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 元素可见。

 转

angularJS(5)

标签:分享   数据   image   name   部分   control   bsp   tool   dom   

原文地址:http://www.cnblogs.com/alinaxia/p/6241031.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!