AngularJs 控制器和过滤器的用法

眼镜蛇 — Tue, 08 Sep 2015 03:43:00 GMT

控制器和过滤器的用法

<html>
<script src= "http://apps.bdimg.com/libs/angular.js/1.3.9/angular.min.js">script>
<body>

<p>ng-controller 指令定义了应用程序控制器。这个控制器是自己定义的p>
<div ng-app="myApp" ng-controller="namesCtrl">

<p>输入过滤:p>

<p><input type="text" ng-model="test">p>

<p>这里用到了过滤器，‘|’为管道过滤器,后面可以接：<br/>
currency    格式化数字为货币格式。<br/>
filter    从数组项中选择一个子集。<br/>
lowercase    格式化字符串为小写。<br/>
orderBy    根据某个表达式排列数组。<br/>
uppercase    格式化字符串为大写。p>
<ul>
  <li ng-repeat="x in names | filter:test | orderBy:'country'">
    {{ fullName(x) + ', ' + x.country | uppercase }}
  li>
ul>

div>

<script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
    $scope.names = [
        {firstName:'Jani',lastName:'a',country:'Norway'},
        {firstName:'Hege',lastName:'b',country:'Sweden'},
        {firstName:'Kai',lastName:'c',country:'Denmark'}
    ];
    $scope.fullName = function($x) {
        return $x.firstName + " " + $x.lastName;
    }
});
script>

body>
html>

眼镜蛇 2015-09-08 11:43 发表评论

AngularJs，指令与表达示的使用

眼镜蛇 — Tue, 08 Sep 2015 03:00:00 GMT

不用多说，自己复制下来，运行一下，就明白怎么回事了。

指令说明

ng-app 指令初始化一个 AngularJS 应用程序。这个必须写

ng-init 指令初始化应用程序数据。有需要实例化的数据就写，没有的话可以不写，它可以接收普通字符串，数组，对象，如有多个可用分号分隔

ng-model 指令把元素值（比如输入域的值）绑定到应用程序。

======================================

在输入框中尝试输入:

姓名:

你输入的为: {{ firstName +""+ lastName }}

显示数组: {{ names[1] }}

显示对象: {{ person.lastName }}

也可以这样显示:

使用 ng-repeat 来循环数组。同理也可以循环对象

眼镜蛇 2015-09-08 11:00 发表评论

BlogJava-Noah-文章分类-AngularJS

AngularJs 控制器和过滤器的用法

AngularJs，指令与表达示的使用

指令说明