在AngularJS中，ng-repeat是一个非常有用的指令，可以使我们轻松遍历数组并渲染模板。但是，有时候我们需要根据特定条件仅渲染数组中的一些元素。这时就可以使用ng-if指令来实现。
ng-if简介
ng-if指令用于根据表达式的值来决定是否渲染DOM元素。如果表达式为真，则渲染元素，否则不渲染。
<div ng-if="myVar">只有当myVar为真时才会显示</div>
在ng-repeat中使用ng-if
通常我们会将ng-repeat和ng-if组合起来使用，以确保只渲染满足特定条件的元素。以下是示例代码：
<ul>
<li ng-repeat="item in items" ng-if="item.visible">{{item.name}}</li>
</ul>在上面的代码中，ng-repeat用于遍历items数组，并将每个元素渲染为li标记。ng-if则用于确定哪些元素应该被渲染。在本例中，我们使用了一个名为visible的属性来判断元素是否应该被渲染。
为了演示这个示例，请看下面的控制器代码：
-- -------------------- ---- -------
----------------------- ---
--------------------------- ---------------- -
------------ - -
------ ----- --- -------- ------
------ ----- --- -------- -------
------ ----- --- -------- ------
------ ----- --- -------- ------
--
---在这个控制器中，我们定义了一个名为items的数组，并将其传递给$scope以便可以在模板中使用。每个元素都有一个名为visible的属性，用于确定是否应该渲染该元素。
总结
ng-if指令非常实用，可以帮助我们根据条件动态地渲染DOM元素。当与ng-repeat组合使用时，它可以让我们精确地控制哪些元素应该被渲染。希望这篇文章能够帮助你更好地理解如何在AngularJS中使用ng-if和ng-repeat。
示例代码
-- -------------------- ---- -------
--------- -----
----- ---------------
------
----- ----------------
--------------------------------
-------
----- -----------------------------
----
--- --------------- -- ------ ---------------------------------------
-----
------- ------------------------------------------------------------------------------------
--------
----------------------- ---
--------------------------- ---------------- -
------------ - -
------ ----- --- -------- ------
------ ----- --- -------- -------
------ ----- --- -------- ------
------ ----- --- -------- ------
--
---
---------
-------
-------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/28756