angularjs初步(二)

发表于   |   分类于   |  

过滤器

  • 使用一个管道字符（|）添加到表达式和指令中

    currency 格式化数字为货币格式

    1
    2
    3
    4
    5
    6
    7
    8
      < div ng-app="myApp" ng-controller="costCtrl">
    < input type="number" ng-model="quantity">
    < input type="number" ng-model="price">
    < p>总价 = {{ (quantity * price) | currency }}</p>
    < /div>

filter 从数组项中选择一个子集

1
2
3
4
5
6
7
8
9
10
11
  < div ng-app="myApp" ng-controller="namesCtrl">
< p><input type="text" ng-model="test"></p>
 <ul>
  <li ng-repeat="x in names | filter:test | orderBy:'country'">
    {{ (x.name | uppercase) + ', ' + x.country }}
  </li>
</ul>
</div>

lowercase 格式化字符串为小写

1
2
3
4
5
  < div ng-app="myApp" ng-controller="personCtrl">
< p>姓名为 {{ lastName | lowercase }}</p>
</div>

orderBy 根据某个表达式排列数组

1
2
3
4
5
6
7
8
9
10
 
< div ng-app="myApp" ng-controller="namesCtrl">
< ul>
  <li ng-repeat="x in names | orderBy:'country'">
    {{ x.name + ', ' + x.country }}
  </li>
</ul>
< div>

uppercase 格式化字符串为大写

1
2
3
4
5
  < div ng-app="myApp" ng-controller="personCtrl">
< p>姓名为 {{ lastName | uppercase }}</p>
< /div>

服务(Service)

  • 服务是一个函数或对象
  • 会一直监控应用，处理事件变化

$location 返回当前页面的 URL 地址， $location服务是作为一个参数传递到controller中，使用时需要在 controller中定义，使用 $location 服务比使用 window.location 对象更好

1
2
3
4
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $location) {
    myUrl = $location.absUrl();
});

$http 向服务器发送请求，应用响应服务器传送过来的数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
//使用 $http 服务向服务器请求数据
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
//$http.get() 从web服务器上读取静态 JSON 数据
    $http.get("welcome.htm").then(function (response) {
        $scope.myWelcome = response.data;
    });
});
//json
 < div ng-app="myApp" ng-controller="customersCtrl">
< ul>
  < li ng-repeat="x in names">
    {{ x.Name + ', ' + x.Country }}
  </li>
</ul>
< /div>
< script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
    $http.get("http://www.runoob.com/try/angularjs/data/Customers_JSON.php")
    .success(function(response) {$scope.names = response.records;});
    //当从服务端载入 JSON 数据时，$scope.names 变为一个数组
});
< /script>

$timeout 对应了 JS window.setTimeout 函数

1
2
3
4
5
6
7
8
// 两秒后显示信息
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $timeout) {
    $scope.myHeader = "Hello World!";
    $timeout(function () {
        $scope.myHeader = "How are you today?";
    }, 2000);
});

$interval 对应了 JS window.setInterval 函数

1
2
3
4
5
6
7
8
//每两秒显示信息:
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $interval) {
    $scope.theTime = new Date().toLocaleTimeString();
    $interval(function () {
        $scope.theTime = new Date().toLocaleTimeString();
    }, 1000);
});

创建自定义服务 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
创建名为hexafy 的访问:
app.service('hexafy', function() {
    this.myFunc = function (x) {
        return x.toString(16);
    }
});
使用自定义的的服务 hexafy 将一个数字转换为16进制数:
app.controller('myCtrl', function($scope, hexafy) {
    $scope.hex = hexafy.myFunc(255);
});
在过滤器 myFormat 中使用服务 hexafy:
app.filter('myFormat',['hexify', function(hexify) {
    return function(x) {
        return hexify.myFunc(x);
    };
}]);
创建服务 hexafy:
< ul>
<li ng-repeat="x in counts">{{x | myFormat}}</li>
</ul>

Select(选择框) ng-options

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
< div ng-app="myApp" ng-controller="myCtrl">
< select ng-model="selectedName" ng-options="x for x in names">
</select>
< /div>
< script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.names = ["Google", "Runoob", "Taobao"];
});
</script> 
//也可以用 ng-repeat，通过数组来循环 HTML 代码来创建下拉列表
<select>
<option ng-repeat="x in names">{{x}}</option>
</select>

ng-options 指令更适合创建下拉列表，使用 ng-options 的选项是一个对象， ng-repeat 是一个字符串

1
2
3
4
5
6
7
8
9
10
11
使用 ng-repeat:
< select ng-model="selectedSite">
< option ng-repeat="x in sites" value="{{x.site}}">{{x.site}}</option>
</select>
< h1>你选择的是: {{selectedSite}}</h1>
使用 ng-options:
< select ng-model="selectedSite" ng-options="x.site for x in sites">
</select>
< h1>你选择的是: {{selectedSite.site}}</h1>
< p>网址为: {{selectedSite.url}}</p>

ng-options 操作对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
< div ng-app="myApp" ng-controller="myCtrl">
< p>选择一辆车:</p>
< select ng-model="selectedCar" ng-options="x for (x, y) in cars">
</select>
直接使用对象的属性
//<select ng-model="selectedCar" ng-options="y.brand for (x, y) in cars">
//</select>
< h1>你选择的是: {{selectedCar.brand}}</h1>
< h2>模型: {{selectedCar.model}}</h2>
< h3>颜色: {{selectedCar.color}}</h3>
< p>注意选中的值是一个对象。</p>
</div>
< script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.cars = {
        car01 : {brand : "Ford", model : "Mustang", color : "red"},
        car02 : {brand : "Fiat", model : "500", color : "white"},
        car03 : {brand : "Volvo", model : "XC90", color : "black"}
    }
});
</script>

表格

  • 表格显示序号可以在 中添加 $index: 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
< div ng-app="myApp" ng-controller="customersCtrl"> 
< table>
  <tr ng-repeat="x in names">
    <td>{{ x.Name }}</td>
    <td>{{ x.Country }}</td>
  </tr>
</table>
</div>
< script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
    $http.get("http://www.runoob.com/try/angularjs/data/Customers_JSON.php")
    .success(function (response) {$scope.names = response.records;});
});
</script>

使用 $even 和 $odd

1
2
3
4
5
6
7
8
< table>
<tr ng-repeat="x in names">
<td ng-if="$odd" style="background-color:#f1f1f1">{{ x.Name }}</td>
<td ng-if="$even">{{ x.Name }}</td>
<td ng-if="$odd" style="background-color:#f1f1f1">{{ x.Country }}</td>
<td ng-if="$even">{{ x.Country }}</td>
</tr>
</table>

HTML DOM

ng-disabled 指令直接绑定应用程序数据到 HTML 的 disabled 属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
< div ng-app="" ng-init="mySwitch=true">
< p>
< button ng-disabled="mySwitch">点我!</button>
</p>
< p>
< input type="checkbox" ng-model="mySwitch">按钮
</p>
< p>
{{ mySwitch }}
</p>
< /div>

ng-show 指令隐藏或显示一个 HTML 元素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
< div ng-app="">
< p ng-show="true">我是可见的。</p>
< p ng-show="false">我是不可见的。</p>
</div>
使用表达式来计算布尔值（ true 或 false）
< div ng-app="">
< p ng-show="hour > 12">我是可见的。</p>
< /div>

ng-hide 指令用于隐藏或显示 HTML 元素