Angular中根据名称条件隐藏md-chip的实现问题

你可以通过过滤渲染数据而非修改原始数组的方式实现需求：既保留"Null"和"Some String"的chip在系统数据中，又不让用户看到、操作它们。

方法一：控制器中过滤数据（推荐） #

在控制器里维护原始数据数组，同时生成一个过滤后的数组用于渲染，这样原始数据完全保留，仅展示符合条件的chip：

// 原始数组，保留所有chip数据（包括需要隐藏的）
$scope.allChips = [
  { name: "正常显示的Chip" },
  { name: "Null" },
  { name: "Some String" },
  { name: "另一个Chip" }
];

// 过滤后的数组，仅包含需要显示的chip
$scope.visibleChips = $scope.allChips.filter(chip => {
  return chip.name !== "Null" && chip.name !== "Some String";
});

模板中绑定过滤后的数组：

<md-chips ng-model="visibleChips" readonly="true">
  <md-chip-template>
    <span>{{$chip.name}}</span>
  </md-chip-template>
</md-chips>

方法二：模板中直接过滤（简单场景） #

如果不需要单独维护过滤后的数组，也可以在模板的循环中直接添加ng-if条件，注意要放在<md-chip>元素上：

<md-chips>
  <md-chip ng-repeat="chip in allChips" ng-if="chip.name !== 'Null' && chip.name !== 'Some String'">
    {{chip.name}}
  </md-chip>
</md-chips>

注意事项 #

• 不要修改原始的allChips数组，确保系统逻辑能访问到所有数据
• 检查你的条件表达式：字符串要加单引号，逻辑判断用&&（同时满足两个排除条件）
• 如果是Angular（而非AngularJS）的mat-chip，语法改为*ngFor和*ngIf：

  <mat-chip-list>
    <mat-chip *ngFor="let chip of allChips" *ngIf="chip.name !== 'Null' && chip.name !== 'Some String'">
      {{chip.name}}
    </mat-chip>
  </mat-chip-list>
  

内容的提问来源于stack exchange，提问作者AquaPi