在AngularJS中，有一些功能相似的指令，就目前学到的内容简单地总结一下。
在上一篇博客中有说到了np-show指令的作用是设置应用中的一部分可见。当ng-show="false"可以设置HTML元素不可见，当ng-show="true"时可以设置HTML元素可见，下面举个例子。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="personCtrl">
<button ng-click="toggle()">隐藏/显示</button>
<p ng-show="myVar">
名: <input type=text ng-model="person.firstName"><br>
姓: <input type=text ng-model="person.lastName"><br><br>
姓名: {{person.firstName + " " + person.lastName}}
</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
$scope.person = {
firstName: "James",
lastName: "Rondo"
};
$scope.myVar = true;
$scope.toggle = function() {
$scope.myVar = !$scope.myVar;
};
});
</script>
</body>
</html> 这个作用就是将HTML中的元素可显示课隐藏，功能类似的指令是ng-hide。当ng-hide="ture"时HTML元素不可见，当ng-hide="false"时元素可见。一下代码与上面的实现的功能基本一样。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="personCtrl">
<button ng-click="toggle()">隐藏/显示</button>
<p ng-hide="myVar">
名: <input type=text ng-model="firstName"><br>
姓: <input type=text ng-model="lastName"><br><br>
姓名: {{firstName + " " + lastName}}
</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
$scope.firstName = "James";
$scope.lastName = "Rondo";
$scope.myVar = false;
$scope.toggle = function() {
$scope.myVar = !$scope.myVar;
}
});
</script>
</body>
</html>
作用就是当点击“隐藏/显示”按钮时能让下面的内容隐藏起来，再点击一次就重新显示出来。
还有np-options指令和np-repeat指令，在上一篇的博客中有说到了np-repeat指令的作用是循环，而np-options的作用是创建一个下拉列表，两个指令都可以用来创建一个下拉列表的选择框。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<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 = ["Alibaba", "Baidu", "Tencent"];
});
</script>
<p>使用op-tions指令创建下拉选择框。</p>
</body>
</html> 使用np-repeat指令则是
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<select>
<option ng-repeat="x in names">{{x}}</option>
</select>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.names = ["Alibaba", "Baidu", "Tencent"];
});
</script>
<p>使用op-repeat指令创建下拉选择框。</p>
</body>
</html>
通过这两个指令都能实现创建下拉选择框的功能，差别就是np-repeat指令选择的值是一个字符串，而np-options指令选择的是一个对象，也就是说使用np-repeat指令来做还是有一定的局限性的。而np-options指令在这方面的使用就比较广泛了，在都能实现这个功能。
其他功能相似的AngularJS指令还有不少，鉴于个人目前的学到的指令，就总结了一下np-show和np-hide以及np-options和np-repeat这两组指令，有区别但又能实现同样的功能。