【angularjs 自学系列】1.过滤器

这段时间接手一个新项目，前端是用angular，之前一直没有接触过，趁这段时间的周末加班，权当来学习下。今天结合官网api，做了一个小例子，功能虽简单，但很多细节的地方没有注意到，导致走了很多弯路。

1.导入angular

去官网下载angular.js，解压后导入项目。我的版本是1.4.2，写这篇文章的时候，angular2已经出来了。

一、过滤搜索

2.控制器层

 public ActionResult Index()
        {

            return View();
        }

        /// <summary>
        /// 抓数据库的数据
        /// </summary>
        /// <returns></returns>
        public JsonResult GetCars()
        {
            using (var context = new DataClasses1DataContext())
            {
                var list = context.Cars.Where(o => true).ToList<Cars>();
                return Json(new
                {
                    IsSuccess = true,
                    Data = list
                });
            }
        }

3.视图

<section ng-app="MyApp" id="section1" ng-controller="controller1">

    <input type="text" ng-model="CarBrand" />
    <table>
        <thead>
            <tr style="text-align:center">
                <th>编号</th>
                <th>车牌号</th>
                <th>品牌</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="x in CarList | filter:CarBrand">
                <td><label><span>{{x.Id_Int}}</span></label> </td>
                <td>{{x.CarNo}}</td>
                <td>{{x.CarBrand}}</td>
            </tr>
        </tbody>
    </table>

</section>

4.JS

@*引用angular*@
<script src="~/Scripts/angular-1.4.2/angular.min.js"></script>
<script src="~/Scripts/jquery-1.10.2.js"></script>

<script>
    $().ready(function () {
        var scope = angular.element($("#section1")).scope();
        scope.Search();
    });

    //声明一个私有函数域
    (function () {
    //创建一个app模块（你就想象成C#里面的一个类库吧）
    var app = angular.module("MyApp", []);
    //在app模块中创建一个"tmplController"控制器
    var Mycontroller = app.controller("controller1", ["$scope", "$http", function ($scope, $http) {  
        $scope.Search = function () {
            $http.post('GetCars', {}).success(function (data) {
                $scope.CarList = data.Data;
            }).error(function () {
                //alert(1);
            });
        }
    }]);
    })()

</script>

值得注意的地方：

1.angular的过滤器-filter，设置过滤器只需要在循环的时候加上 “ filter:需要过滤的变量名”，变量名必须和循环的子项一样，包括大小写。

EX:

 <tr ng-repeat="x in CarList | filter:CarBrand">
       <td>{{x.CarBrand}}</td>
</tr>

2.app中创建控制器的时候，function参数要么不声明，要么全部申明

EX:

 var Mycontroller = app.controller("controller1", ["$scope", "$http", function ($scope,$http) {  
    }]);

要么：

var Mycontroller = app.controller("controller1",  function ($scope, $http) {  
    });

运行结果：

初始时，加载数据表里的所有数据：

在文本框输入‘尼’，过滤品牌中包含‘尼’的行

二、格式化时间

 $scope.datetime = new Date().valueOf();

{{datetime | date:'yyyy-MM-dd HH:mm:ss'}}

-----------------------------------------

 //自定义过滤器
    app.filter('carType', function () {
        var car = function (type) {
            return type > 1 ? '我是大于1的' : '我不大于1';
        }
        return car;
    });

{{car.CarType}}{{car.CarType | carType}}

如果格式化日期没效果，可用自定义过滤器：

myApp.filter("jsonData",function($filter){
return function(input,format){
//时间戳
var timestamp=Number(input.replace(/\/Date\((d+)\)\//,"$1"));
//转换格式
return $filter("date")(timestamp,fomat);
}
});

{{datetime | jsonDate:'yyyy-MM-dd HH:mm:ss'}}