AngularJS内置指令(2)


<input type="text" ng-readonly="stopTheWorld" value="stop the world after 3s"/>
.run(function($rootScope,$timeout){
    $rootScope.stopTheWorld=false;
    $timeout(function(){
        $rootScope.stopTheWorld = true;
    },3000)
})

ng-checked

这个是给<input type="checkbox" />用的,比如...

复制代码 代码如下:


<input type="checkbox" ng-checked="someProperty" ng-init="someProperty = true" ng-model="someProperty">

ng-selected

给<select>里面的<option>用的,例子:

复制代码 代码如下:


<label>
    <input type="checkbox" ng-model="isFullStack">
    I'm Full Stack Engineer
</label>
<select>
    <option>Front-End</option>
    <option>Back-End</option>
    <option ng-selected="isFullStack">Full Stack !!!</option>
</select>
 

ng-show/ng-hide

根据表达式显示/隐藏HTML元素,注意是隐藏,不是从DOM移除,例如:

复制代码 代码如下:


<div ng-show="1+1 == 2">
    1+1=2
</div>
<div ng-hide="1+1 == 3">
    you can't see me.
</div>

ng-change

不是HTML那套onXXX之类的,而是ng-XXX。
结合ng-model使用,以ng-change为例:

复制代码 代码如下:


<input type="text" ng-model="calc.arg"  ng-change="calc.result = calc.arg*2" />
    <code>{{ calc.result }}</code>

或者比如ng-options

{{}}

其实这个也是一个指令,也许觉得和ng-bind差不多,但页面渲染略慢时可能会被看到。
另外,{{}}的performance远不如ng-bind,只是用起来很方便。

ng-bind

ng-bind的行为和{{}}差不多,只是我们可以用这个指令来避免FOUC(Flash Of Unrendered Content),也就是未渲染导致的闪烁。

ng-cloak

ng-cloak也可以为我们解决FOUC。 ng-cloak会将内部元素隐藏,直到路由调用对应的页面。

ng-if

如果ng-if中的表达式为false,则对应的元素整个会从DOM中移除而非隐藏,但审查元素时你可以看到表达式变成注释了。
如果相进行隐藏,可以使用ng-hide。

复制代码 代码如下:


<div ng-if="1+1===3">
    无法审查到该元素
</div>
<div ng-hide="1+1==2">
    可审查
</div>

ng-switch

单独使用没什么意思,下面是例子:

复制代码 代码如下:


<div ng-switch on="1+1">
    <p ng-switch-default>0</p>
    <p ng-switch-when="1">1</p>
    <p ng-switch-when="2">2</p>
    <p ng-switch-when="3">3</p>
</div>

ng-repeat

不明白为毛不叫iterate,总之是遍历集合,给每个元素生成模板实例,每个实例的作用域中可以用一些特殊属性,如下:

复制代码 代码如下:


$index
$first
$last
$middle
even
odd

不用特地解释,这些都很容易看出来是干什么的,下面是一个例子:

复制代码 代码如下:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wgfszp.html