• 这里讲一下AngularJS比较简单的几个事件,包括ng-click``ng-selected``ng-change

    ng-click

    ng-click指令用来定义HTML元素被点击后触发的事件。

    <div ng-app="">
      <button ng-click="count = count + 1" ng-init="count = 1">ClickMe</button>
      <p>{{ count }}</p>
    </div>
    

    上面的click定义了一个表达式(expression)每次点击button后,count便加一。

    ng-click事件还可以触发一个函数

    <div ng-app="myapp" ng-controller="myCtrl">
      <button ng-click="click()">clickFun</button>
    </div>
    <script type="text/javascript">
      var app = angular.module("myapp",[]);
      app.controller("myCtrl",function($scope){
        $scope.click = function(){
          alert("you clicked me!");
        }
      })
    </script>
    

    上面的实例展示了当Button被点击时触发一个函数的例子。

    ng-selected

    ng-selected 指令用于设置<select>列表中的 <option> 元素的 selected 属性。ng-selected 属性的表达式返回 true 则选项被选中。

    <div ng-app="">
      点击复选框选择 BMW 选项:
      <input type="checkbox" ng-model="mySel">
      <p>我喜欢的车:</p>
      <select>
        <option>Volvo</option>
        <option ng-selected="mySel">BMW</option>
        <option>Ford</option>
      </select>
    </div>
    

    上面的例子展示了当checkbox被选中时,即mySeltrue时,ng-seletedmySel的选项被选中。

    ng-change

    ng-change指令定义了当HTML元素改变的时候触发的事件。

    ng-change需要搭配ng-model指令使用。

    <div ng-app="myapp" ng-controller="myCtrl">
      <input type="text" ng-change="myFunc()" ng-model="myValue" />
      <p>The input field has changed {{ count }} times.</p>
    </div>
    <script type="text/javascript">
    var app = angular.module("myapp",[]);
    app.controller("myCtrl",function($scope){
      $scope.count = 0;
      $scope.myFunc = function(){
        $scope.count++;
      }
    })
    </script>
    

    上面的例子演示了当输入框内内容改变时触发函数来改变count值。

    (完)