Question

假设我有以下对象：

{
    "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的展示方式。

例如，如果类型等于 groupA 我想要：

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

如果类型等于 groupB ，我希望：

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

这可能吗？有没有人对我如何完成他有任何建议？我是棱角分明的，所以任何帮助都会受到赞赏。

Answer 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

第二种方法是使用ngShow：

显示基于item.type值的相应元素

<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

编辑：补充一点澄清。

Answer 2

您可以在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>

Answer 3

您可以使用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>

ng-repeat根据数据显示内容

3 个答案: