关于angular的一些新手容易忽略的小知识点

1.解决页面刚加载时使用{{name}}这种方式绑定数据会有一瞬间的表达式显示的问题

方法一：使用ng-bind来绑定数据，

方法二：添加ng-cloak指令；如

</div>

2.ng-change指令

1.定义和用法：

ng-change 指令用于告诉 AngularJS 在 HTML 元素值改变时需要执行的操作。

ng-change 指令需要搭配 ng-model 指令使用。

AngularJS ng-change 指令指令不会覆盖原生的 onchange 事件, 如果触发该事件，ng-change 表达式与原生的 onchange 事件都会执行。

ng-change 事件在值的每次改变时触发，它不需要等待一个完成的修改过程，或等待失去焦点的动作。

ng-change 事件只针对输入框值的真实修改，而不是通过 JavaScript 来修改。

实例：

<div ng-controller="myCtrl">
<input type="text" ng-change="myFunc()" ng-model="myValue" />
<p>The input field has changed {{count}} times.</p>
</div>

angular.module('myApp', [])
.controller('myCtrl', ['$scope', function($scope) {
    $scope.count = 0;
    $scope.myFunc = function() {
        $scope.count++;
    };
}]);

</script>

</body>

3.ng-checked指令

定义和用法：

ng-checked 指令用于设置复选框(checkbox)或单选按钮(radio)的 checked 属性。

如果 ng-checked 属性返回 true，复选框(checkbox)或单选按钮(radio)将会被选中。

实例：<body ng-app="">
<p>My:</p>
<input type="checkbox" ng-model="all"> Check all<br><br>

<input type="checkbox" ng-checked="all">Volvo<br>
<input type="checkbox" ng-checked="all">Ford<br>
<input type="checkbox" ng-checked="all">Mercedes
</body>

4.ng-class指令

定义和用法：

ng-class 指令用于给 HTML 元素动态绑定一个或多个 CSS 类。

ng-class 指令的值可以是字符串，对象，或一个数组。

如果是字符串，多个类名使用空格分隔。

如果是对象，需要使用 key-value 对，key 为你想要添加的类名，value 是一个布尔值。只有在 value 为 true 时类才会被添加。

如果是数组，可以由字符串或对象组合组成，数组的元素可以是字符串或对象。

实例：

<select ng-model="home">
<option value="sky">Sky</option>
<option value="tomato">Tomato</option>
</select>

<div ng-class="home">
<h1>Welcome Home!</h1>
<p>I like it!</p>
</div>

5.ng-switch指令

定义和用法：

ng-switch 指令根据表达式显示或隐藏对应的部分。

对应的子元素使用 ng-switch-when 指令，如果匹配选中选择显示，其他为匹配的则移除。

你可以通过使用 ng-switch-default 指令设置默认选项，如果都没有匹配的情况，默认选项会显示。

实例：

<element ng-switch="expression">
  <element ng-switch-when="value"></element>
  <element ng-switch-when="value"></element>
  <element ng-switch-when="value"></element>
  <element ng-switch-default></element>
</element>

6.获取html中元素的内容

例如：需要删除表格中的某一条数据，需要先拿到这条数据，这时就可以使用传参的方式获取到具体的某条你想要的数据了。

实例：

<tr ng-repeat="x in data">
    <td ng-click="remove(x.id)" ng-bind="x.name"></td>
</tr>

$scope.remove = function(id){
    alert(id)
};

7.切记用ng-if代替ng-show

这是angular的一个小坑,也可以说是不大不小的一个坑.一些长列表数据,可能有一些东西是通过默认隐藏,点击显示的形式展现的.而这部分可控制显隐的内容中也会伴随很多数据绑定.这个在页面渲染的时候非常影响性能.

举一个列子,比如说通常angular建议一个页面的数据绑定不超过2000个,假如现在有一个页面直接绑定了2000个model,然后你加载,会发现非常卡.如果你将每100的model设置为ng-show,默认情况下不显示,你会发现还是很卡.

然后你将所有的ng-show换成ng-if,你会发现性能瞬间快的像两个应用.原因在ng-show还是会执行其中的所有绑定,ng-if则会在等于true,也就是显示的时候再去执行其中的绑定.这样一来性能就有很大的提高,我之前通过这个简单的修改,页面加载快了10倍左右.

所以在能使用ng-if的情况,用它代替所有的ng-show和ng-hide吧.

8.解决select下拉第一个选项为空白的问题

在angular设置select时，由于没有设置默认的选择项，就会导致第一个option中的值为undefined，选择其他值时，option为undefined的选项却自动消失了，这说明是在代码中没有设置select的默认选项。如果select有值，则显示正常。在代码中，初始化select的默认值即可。更改代码如下：

<select ng-model="prov" ng-change="changeProv()" ng-init="prov='sichuan'">
<option ng-repeat="prov in provs" value={{prov.name}}>{{prov.value}}</option>
</select>
<select>
<option ng-repeat="value in city">{{value}}</option>
</select>

只需要添加红色的代码，即可使其默认选中一个。