ng-repeat 根据数据显示内容答案

【问题标题】：ng-repeat show content depending on datang-repeat 根据数据显示内容
【发布时间】：2015-08-20 20:59:08
【问题描述】：

假设我有以下对象：

{
    "items": [
        { "type": "groupA", "name": "title 1" },
        { "type": "groupB", "name": "title 2"}
    ]
}

我在下面有以下ng-repeat：

<div ng-repeat="item in data.items">
    {{ item.name }}
</div>

理想情况下，我希望能够展示我如何根据类型显示item.name。

例如，如果 type 等于 groupA 我想拥有：

<input value="{{ item.name }}" />

如果 type 等于 groupB，我想要：

<div>{{ item.name }}</div>

这可能吗？有人对我如何完成他的工作有任何建议吗？我是 Angular 新手，因此我们将不胜感激。

【问题讨论】：

看帖子：stackoverflow.com/questions/21751676/…，基本上和你问的一样

标签： javascript angularjs

【解决方案1】：

这样做的一种方法是称为 ngIf 的角度条件：

<div ng-repeat="item in data.items">
    <div ng-if="item.type == 'groupA'">
        <input value="{{ item.name }}" />
    </div>
    <div ng-if="item.type == 'groupB'">
        <div>{{ item.name }}</div>
    </div>
</div>

更多关于 Angular ngIf 函数的信息：https://docs.angularjs.org/api/ng/directive/ngIf

第二种方法是根据 item.type 的值显示适当的元素，使用 ngShow：

<div ng-repeat="item in data.items">
    <input ng-show="item.type == 'groupA'" value="{{ item.name }}" />
    <div ng-show="item.type == 'groupB'" />{{ item.name }}</div>
</div>

更多关于 ngShow 的信息在这里：https://docs.angularjs.org/api/ng/directive/ngShow

第三种方式是开关。尽管开关对于显示仅有的两种元素类型中的一种可能会很混乱。更多关于开关的信息：https://docs.angularjs.org/api/ng/directive/ngSwitch

编辑：添加了更多说明。

【讨论】：

【解决方案2】：

您可以使用ng-if。例如：

<div ng-repeat="item in data.items">
    <div ng-if="item.type == 'groupA'">
        <input value="{{ item.name }}" />
    </div>      
    <div ng-if="item.type == 'groupB'">
        {{ item.name }}
    </div>    
</div>

【讨论】：

【解决方案3】：

您可以在 ng-repeat 中使用 ng-if 指令。试试这个：-

  <div ng-repeat="item in data.items">
    <input ng-if="item.type == 'groupA'" value="{{ item.name }}" />
    <div ng-if="item.type == 'groupB'">
       {{ item.name }}
    </div> 
  </div>

【讨论】：