angularJs(1)指令篇

angularJs模板

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="../../angular.js"></script>
</head>
<body ng-app="app" ng-controller="ctr">

<script>
    angular.module('app',[])
            .controller('ctr', function ($scope) {

            })
</script>
</body>
</html>

常见的指令

　　ng-model
ng-bind
ng-bind-html
ng-if
ng-show
ng-hide
ng-reapeat
ng-href
ng-src
ng-disable
ng-checked
ng-selected
ng-class
ng-style

..　下面介绍的是一些比较常见相对复杂一点的

ng-reapeat

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="../../angular.js"></script>
</head>
<body ng-app="app" ng-controller="ctr">
<select ng-model="str">
    <option  ng-repeat="(k,v) in data track by $index">{{v}}</option>
</select>
{{str}}

<script>
    angular.module('app',[])
            .controller('ctr', function ($scope) {
                $scope.data=[1,23,5,54,8,4,8]
            })
</script>
</body>
</html>

(k,v) in data track by $index 可分别输出key,value
str的值会是选中option中标签里面的内容

ng-cloak
解决数据未加载是出现的双括号{{}},对含有那个数据属性的块为加载数据之前为隐藏

    <style>
        [ng-cloak]{
            display: none;
        }
    </style>
</head>
<body ng-app>
<p ng-cloak="">{{'asdada'+'dads'}}</p>
<script src="angular.js"></script>
</body>

ng-class

 7     <style>
 8         .red{
 9             color: red;
10         }
11         .yellow{
12             color: yellow;
13         }
14     </style>
15 </head>
16 <body ng-app="app" ng-controller="ctr">
17 <!--方法1
18 <p ng-class="{'true':'red','false':'yellow'}[flag]"> 我是内容</p>
19 -->
20 <!--方法2-->
21 <p ng-class="{'yellow':flag}"> 我是内容</p>
22 
23 <!--方法3
24 <p class="{{变量}}"> 我是内容</p>
25 -->
26 <button ng-click="fn()">按钮{{flag}}</button>
27 <script>
28     angular.module('app',[])
29             .controller('ctr', function ($scope) {
30                 $scope.flag=true;
31                 $scope.fn= function () {
32                     $scope.flag=!$scope.flag;
33                 }
34             })
36 </script>

ng-style
```
<p ng-style={'color':'red'}>53456</p>
```

ng-selected

<option value="red" ng-selected='true'>红</option>

ng-switch

<div ng-init="str=1" ng-switch="str">
    <div ng-switch-when="red">我是red</div>
    <div ng-switch-when="yellow">我是yellow</div>
    <div ng-switch-when="blue">我是blue</div>
    <div ng-switch-default="">我没被选</div>
</div>

ng-cheched='str'
这里的str不会将数据返回$scope只吧数据返回视图

<!DOCTYPE html>
<html ng-app="app">
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .red{
            color:red;
        }
    </style>
</head>
<body ng-controller="ctr">
<p><input type="checkbox" ng-model="str"/>是否全选</p>
<ul>
    <!-- ng-checked只会从数据到视图 --单向绑定
        而ng-model会把数据同步到视图，也会把视图的改变同步到数据------双向绑定-->
    <li>选项01<input type="checkbox" ng-checked="str"/></li>
    <li>选项02<input type="checkbox" ng-checked="str"/></li>
    <li>选项03<input type="checkbox" ng-checked="str"/></li>
    <li>选项04<input type="checkbox" ng-checked="str"/></li>
    <li>选项05<input type="checkbox" ng-checked="str"/></li>
</ul>
<strong>{{str}}</strong>
</body>
<script src="angular.js"></script>
<script>
    angular.module('app',[])
            .controller('ctr',function($scope){
                $scope.data=['张三','王五','李四','赵六','赵六']

            })
</script>
</html>

posted @ 2017-04-21 20:08 你值得拥有xxx 阅读(134) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

阿奇

angularJs(1)指令篇

常见的指令

公告