21、AngularJs知识点总结 part-3

1、选择框select

在 AngularJS 中我们可以使用 ng-option 指令来创建一个下拉列表，列表项通过对象和数组循环输出，也可以使用ng-repeat 指令来创建下拉列表：

区别：ng-repeat 指令是通过数组来循环 HTML 代码来创建下拉列表，但 ng-options 指令更适合创建下拉列表，它有以下优势：

使用 ng-options 的选项的一个对象， ng-repeat 是一个字符串。

 <div class=" container">
     <div ng-app="myApp" ng-controller="ctl">
         <select ng-model="selectName" ng-options="x for x in list">
         </select>
         <br/>
         <br/>
         <select>
             <option ng-repeat="x in list">{{x}}</option>
         </select>

         <br/>
         <br/>
         <!-- 使用ng-options得到selectedsite是一个对象-->
         <select ng-model='selectedsite' ng-options="x.site for x in sites"></select>

         <br/>
         <br/>
         <!-- 使用ng-repeat只能得到url这样的字符串-->
         <select ng-model="selectedSite">
             <option ng-repeat="x in sites">{{x.url}}</option>
         </select>

     </div>
 </div>

 <script>
     var app = angular.module('myApp', []);
     app.controller('ctl', function ($scope) {
         $scope.list = ['hello', 'nihao', 'salaheiyou']
         $scope.sites = [
             {site: "Google", url: "http://www.google.com"},
             {site: "Runoob", url: "http://www.runoob.com"},
             {site: "Taobao", url: "http://www.taobao.com"}
         ];
     });

 </script>

2、表格

<div class=" container">
    <div ng-app="myApp" ng-controller="ctl">
        <table>
            <tr ng-repeat="siteSelected in sites | orderBy:'url' ">

                <td>
                    {{$index+1}}
                </td>

                <td>
                    <b>
                        {{siteSelected.site|uppercase}}
                    </b>
                </td>

                <td>
                    {{siteSelected.url}}
                </td>

                <td ng-if="$even" style="color: red">
                    偶数
                </td>

                <td ng-if="$odd" style="color:blue">
                    奇数
                </td>

            </tr>

        </table>
    </div>
</div>

<script>
    var app = angular.module('myApp', []);
    app.controller('ctl', function ($scope) {
        $scope.list = ['hello', 'nihao', 'salaheiyou']
        $scope.sites = [
            {site: "Taobao", url: "http://www.taobao.com"},
            {site: "Google", url: "http://www.google.com"},
            {site: "Runoob", url: "http://www.runoob.com"}
        ];
    });

</script>

table, th , td {
    border: 1px solid grey;
    border-collapse: collapse;
    padding: 5px;
}
table tr:nth-child(odd) {
    background-color: #f1f1f1;
}
table tr:nth-child(even) {
    background-color: #ffffff;
}

3、SQL、HTML DOM、事件

<div class=" container">
    <div ng-app="myApp" ng-controller="ctl">

        <!-- 设置是否可点击，点击状态取决于mySwitch这个值-->
        <button ng-disabled="mySwitch">
            点我
        </button>

        <!-- mySwtich这个值是checkbox的选中状态-->
        <p>
            <input type="checkbox" ng-model="mySwitch">按钮
        </p>

        <!-- 显示选中状态-->
        <p>
            {{mySwitch}}
        </p>

        <!-- 是否可见-->
        <p ng-hide="false"> 可见 </p>

        <p ng-hide="true"> 不可见 </p>

        <!-- 设置点击事件-->
        <button ng-click="count=count+1">点我加1</button>
        {{count}}

        <!-- 隐藏/显示一个按钮-->
        <br>
        <br>
        <button ng-click="toggle()">隐藏/显示</button>
        <p ng-show="myVar">看我72变</p>
    </div>
</div>

<script>
    var app = angular.module('myApp', []);
    app.controller('ctl', function ($scope) {
        $scope.count = 0;
        $scope.myVar = true;
        $scope.toggle = function () {
            $scope.myVar = !$scope.myVar;
        }
    });

</script>

4、 模块

模块定义了一个应用程序，控制器通常属于一个模块

你可以通过 AngularJS 的 angular.module 函数来创建模块

<div ng-app="myApp">...</div>

<script>

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

</script>

"myApp" 参数对应执行应用的 HTML 元素。

可以使用 ng-controller 指令来添加应用的控制器:

<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>

<script>

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

app.controller("myCtrl", function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
});

</script>

自定义指令

JavaScript 中应避免使用全局函数。因为他们很容易被其他脚本文件覆盖。

AngularJS 模块让所有函数的作用域在该模块下，避免了该问题

什么时候载入库？

JavaScript 中应避免使用全局函数。因为他们很容易被其他脚本文件覆盖。

AngularJS 模块让所有函数的作用域在该模块下，避免了该问题

7、表单

<!--ng-app 指令定义了 AngularJS 应用 ng-controller 指令定义了应用控制器。-->
<!-- formCtrl 函数设置了 master 对象的初始值，并定义了 reset() 方法。-->

<div ng-app="myApp" ng-controller="formCtrl">
    <!--novalidate 属性是在 HTML5 中新增的。禁用了使用浏览器的默认验证-->
    <!-- novalidate 属性在应用中不是必须的，但是你需要在 AngularJS 表单中使用，用于重写标准的 HTML5 验证。    -->
    <form novalidate>
        First Name:<br>
        <!-- ng-model 指令绑定了两个 input 元素到模型的 user 对象-->
        <input type="text" ng-model="user.firstName"><br>
        Last Name:<br>
        <input type="text" ng-model="user.lastName">
        <br><br>
        <!-- ng-click 指令调用了 reset() 方法，且在点击按钮时调用。-->
        <button ng-click="reset()">RESET</button>
    </form>
    <p>form = {{user}}</p>
    <p>master = {{master}}</p>
</div>

<script>
    var app = angular.module('myApp', []);
    app.controller('formCtrl', function($scope) {
        $scope.master = {firstName: "John", lastName: "Doe"};
//        reset() 方法设置了 user 对象等于 master 对象。
        $scope.reset = function() {
            $scope.user = angular.copy($scope.master);
        };
        $scope.reset();
    });
</script>

8、输入验证

 <!--$dirty    表单有填写记录-->
 <!--$valid    字段内容合法的-->
 <!--$invalid    字段内容是非法的-->
 <!--$pristine    表单没有填写记录-->
 <form ng-app="myApp" ng-controller="validateCtrl"
       name="myForm" novalidate>

     <p>用户名:<br>
         <input type="text" name="user" ng-model="user" required>
   <span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
   <span ng-show="myForm.user.$error.required">用户名是必须的。</span>
   </span>
     </p>

     <p>邮箱:<br>
         <input type="email" name="email" ng-model="email" required>
   <span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
   <span ng-show="myForm.email.$error.required">邮箱是必须的。</span>
   <span ng-show="myForm.email.$error.email">非法的邮箱。</span>
   </span>
     </p>

     <p>
         <input type="submit"
                ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||
   myForm.email.$dirty && myForm.email.$invalid">
     </p>

 </form>

 <script>
     var app = angular.module('myApp', []);
     app.controller('validateCtrl', function ($scope) {
         $scope.user = 'John Doe';
         $scope.email = 'john.doe@gmail.com';
     });
 </script>

9、API

angular.lowercase()	转换字符串为小写
angular.uppercase()	转换字符串为大写
angular.isString()	判断给定的对象是否为字符串，如果是返回 true。
angular.isNumber()	判断给定的对象是否为数字，如果是返回 true。

 <div ng-app="myApp" ng-controller="myCtrl">
     <p>{{'original:'+x1}}</p>
     <p>{{'xiaoxie:'+ x2 }}</p>
     <p>{{'daxie:'+ x3 }}</p>
     <p>{{'isnumber:'+ x4 }}</p>
     <p>{{'isString:'+ x5 }}</p>
 </div>

 <script>
     var app = angular.module('myApp', []);
     app.controller('myCtrl', function($scope) {
         $scope.x1 = "John";
         $scope.x2 = angular.lowercase($scope.x1);
         $scope.x3 = angular.uppercase($scope.x1);
         $scope.x4 = angular.isNumber($scope.x1);
         $scope.x5 = angular.isString($scope.x1);
     });
 </script>

10、包含

11、动画