kunyashaw博客主页 关注kunyashaw新博客 关于kunyashaw 转到底部

21、AngularJs知识点总结 part-3

1、选择框select

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

 

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

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

 1 <div class=" container">
 2     <div ng-app="myApp" ng-controller="ctl">
 3         <select ng-model="selectName" ng-options="x for x in list">
 4         </select>
 5         <br/>
 6         <br/>
 7         <select>
 8             <option ng-repeat="x in list">{{x}}</option>
 9         </select>
10 
11         <br/>
12         <br/>
13         <!-- 使用ng-options得到selectedsite是一个对象-->
14         <select ng-model='selectedsite' ng-options="x.site for x in sites"></select>
15 
16         <br/>
17         <br/>
18         <!-- 使用ng-repeat只能得到url这样的字符串-->
19         <select ng-model="selectedSite">
20             <option ng-repeat="x in sites">{{x.url}}</option>
21         </select>
22 
23 
24     </div>
25 </div>
26 
27 
28 <script>
29     var app = angular.module('myApp', []);
30     app.controller('ctl', function ($scope) {
31         $scope.list = ['hello', 'nihao', 'salaheiyou']
32         $scope.sites = [
33             {site: "Google", url: "http://www.google.com"},
34             {site: "Runoob", url: "http://www.runoob.com"},
35             {site: "Taobao", url: "http://www.taobao.com"}
36         ];
37     });
38 
39 </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、输入验证

 

 1 <!--$dirty    表单有填写记录-->
 2 <!--$valid    字段内容合法的-->
 3 <!--$invalid    字段内容是非法的-->
 4 <!--$pristine    表单没有填写记录-->
 5 <form ng-app="myApp" ng-controller="validateCtrl"
 6       name="myForm" novalidate>
 7 
 8     <p>用户名:<br>
 9         <input type="text" name="user" ng-model="user" required>
10   <span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
11   <span ng-show="myForm.user.$error.required">用户名是必须的。</span>
12   </span>
13     </p>
14 
15     <p>邮箱:<br>
16         <input type="email" name="email" ng-model="email" required>
17   <span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
18   <span ng-show="myForm.email.$error.required">邮箱是必须的。</span>
19   <span ng-show="myForm.email.$error.email">非法的邮箱。</span>
20   </span>
21     </p>
22 
23     <p>
24         <input type="submit"
25                ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||
26   myForm.email.$dirty && myForm.email.$invalid">
27     </p>
28 
29 </form>
30 
31 <script>
32     var app = angular.module('myApp', []);
33     app.controller('validateCtrl', function ($scope) {
34         $scope.user = 'John Doe';
35         $scope.email = 'john.doe@gmail.com';
36     });
37 </script>

 

9、API

 

angular.lowercase() 转换字符串为小写
angular.uppercase() 转换字符串为大写
angular.isString() 判断给定的对象是否为字符串,如果是返回 true。
angular.isNumber() 判断给定的对象是否为数字,如果是返回 true。
 1 <div ng-app="myApp" ng-controller="myCtrl">
 2     <p>{{'original:'+x1}}</p>
 3     <p>{{'xiaoxie:'+ x2 }}</p>
 4     <p>{{'daxie:'+ x3 }}</p>
 5     <p>{{'isnumber:'+ x4 }}</p>
 6     <p>{{'isString:'+ x5 }}</p>
 7 </div>
 8 
 9 <script>
10     var app = angular.module('myApp', []);
11     app.controller('myCtrl', function($scope) {
12         $scope.x1 = "John";
13         $scope.x2 = angular.lowercase($scope.x1);
14         $scope.x3 = angular.uppercase($scope.x1);
15         $scope.x4 = angular.isNumber($scope.x1);
16         $scope.x5 = angular.isString($scope.x1);
17     });
18 </script>

 

 

10、包含

 

11、动画

 

posted @ 2016-04-01 15:38  kunyashaw  阅读(208)  评论(0编辑  收藏
回到顶部