AngularJS -- 代码实例

整理书籍内容（QQ:283125476 发布者：M 【重在分享，有建议请联系-》QQ号】）

ng-change 当文本输入字段中内容发生了变化，就会改变equation.x的值：

<body ng-app="myApp">
    <div ng-controller="TestController">
        <input type="text" 
            ng-model="equation.x"
            ng-change="change()" />
        <code>{{ equation.output }}</code>
    </div>


    <script>
    var app = angular.module("myApp", []);

    app.controller("TestController", function($scope) {
        $scope.equation = {};
        $scope.change = function() {
            $scope.equation.output = parseInt($scope.equation.x) + 2;
        };
    });
    </script>
</body>
  • 表单合法时设置 ng-valid;
  • 表单不合法时设置 ng-invlid;
  • 表单未进行修改时设置 ng-pristion;
  • 表单进行过修改时设置 ng-dirty;

ng-cloak效果跟ng-bind差不多，就是为了防止闪烁

<body ng-app="myApp">
    <div ng-controller="TestController">
        <p ng-cloak>sss{{ aaa }}</p>
    </div>
    
    <script>
    var app = angular.module("myApp", []); 

    app.controller("TestController", function($scope, $timeout) {
        //dosomething;
        $timeout(function() {
            $scope.aaa = "lll";
        }, 1000);
    });
    </script>
</body>

ng-click

<body ng-app="myApp">
    <div ng-controller="TestController">
        <button ng-click="count = count +1"
                ng-init="count = 9">increment</button>

        count: {{ count }};
        <button ng-click="decrement()">decrement</button>
    </div>

    <script>
    var app = angular.module("myApp", []); 

    app.controller("TestController", function($scope) {
        //dosomething;
        $scope.decrement = function() {
            $scope.count = $scope.count - 1;
        };
    });
    </script>
</body>

ng-select

<body ng-app="myApp">
    <div ng-controller="TestController">
        <ul>
            <li ng-repeat="color in colors">
              Name: <input ng-model="color.name">
              [<a href ng-click="colors.splice($index, 1)">X</a>]
            </li>
            <li>
              [<a href ng-click="colors.push({})">add</a>]
            </li>
          </ul>
          <hr/>
          Color (null not allowed):
          <select ng-model="myColor" ng-options="color.name for color in colors"></select><br>

          Color (null allowed):
          <span  class="nullable">
            <select ng-model="myColor" ng-options="color.name for color in colors">
              <option value="">-- choose color --</option>
            </select>
          </span><br/>

          Color grouped by shade:
          <select ng-model="myColor" ng-options="color.name group by color.shade for color in colors">
          </select><br/>


          Select <a href ng-click="myColor = { name:'not in list', shade: 'other' }">bogus</a>.<br>
          <hr/>
          Currently selected: {{ {selected_color:myColor} }}
          <div style="border:solid 1px black; height:20px"
               ng-style="{'background-color':myColor.name}">
          </div>
    </div>

    <script>
    var app = angular.module("myApp", []); 

    app.controller("TestController", function($scope) {
        $scope.colors = [
              {name:'black', shade:'dark'},
              {name:'white', shade:'light'},
              {name:'red', shade:'dark'},
              {name:'blue', shade:'dark'},
              {name:'yellow', shade:'light'}
            ];
            $scope.myColor = $scope.colors[2]; 
    });
    </script>
</body>

ng-attr-(suffix)

当AngularJS编译DOM时会查找花括号{{ some expression }}内的表达式。这些表达式会被自动注册到$watch服务中
并更新到$disgest循环中，成为它的一部分：

有时候浏览器会对属性进行很苛刻的限制。SVG就是一个例子：

<svg>
   <circle cx="{{ cs }}"></sircle>
</svg>

运行上面的代码会抛出一个错误，指出我们有一个非法属性，可以用ng-attr-cs来解决这个问题，
注意，cx位于这个名称的尾部，在这个属性中，通过用来{{ }}写表达式，达到前面提到的目的：

<svg>
    <circle ng-attr-cx="{{ cx }}"></circle>
</svg>
posted @ 2015-05-12 11:14  小数  阅读(400)  评论(0)  编辑  收藏  举报