Angular JS 控制器，过滤器

一：Angular JS 控制器

1.ng-controller 指令定义了应用程序控制器。

控制器是 JavaScript 对象，由标准的 JavaScript 对象的构造函数创建。

<div ng-app="myApp" ng-controller="personCtrl">

名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{fullName()}}

</div>

<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
    $scope.fullName = function() {
        return $scope.firstName + " " + $scope.lastName;
    }
});
</script>//输出结果是：名：John姓：Doe 姓名：John Doe

ng-controller="myCtrl" 定义一个控制器。

$scope 是一个应用对象，用来保存AngularJS 模型的对象。

ng-model 指令绑定输入域到控制器的属性。

fullName（）是一个函数。

也可以引外部文件的JS

二：Angular JS 过滤器

1.uppercase，lowercase 大小写转换

{{ "lower" | uppercase }}   // 结果：LOWER
{{ "TANK" | lowercase }}      // 结果：tank

2.date 格式化

{{1490161945000 | date:"yyyy-MM-dd HH:mm:ss"}} // 2017-03-22 13:52:25

3、number 格式化（保留小数）

{{14.15000 | number:2}} //结果：14.15

4.currency货币格式化

{{ 250 | currency }}            // 结果：$250.00
{{ 250 | currency:"RMB ￥ " }}  // 结果：RMB ￥ 250.00

5.limitTo 截取

{{"1234567890" | limitTo :6}} // 从前面开始截取6位
{{"1234567890" | limitTo:-4}} // 从后面开始截取4位

6.orderBy 排序

 // 根id降序排
{{ [{"age": 20,"id": 10,"name": "iphone"},
{"age": 12,"id": 11,"name": "sunm xing"},
{"age": 44,"id": 12,"name": "test abc"}
] | orderBy:'id':true }}

// 根据id升序排
{{ [{"age": 20,"id": 10,"name": "iphone"},
{"age": 12,"id": 11,"name": "sunm xing"},
{"age": 44,"id": 12,"name": "test abc"}
] | orderBy:'id' }}

7. filter查找

 // 查找name为iphone的行
{{ [{"age": 20,"id": 10,"name": "iphone"},
{"age": 12,"id": 11,"name": "sunm xing"},
{"age": 44,"id": 12,"name": "test abc"}
] | filter:{'name':'iphone'} }}

Angular JS 控制器，过滤器

猜你喜欢