angularjs - md-chips 中的 $index 不会在 AngularJS 中更新

Question

$index在md-chipsAngularJS 中不要更新。我怎么能克服这个？我需要在每个芯片之前放置一个逗号，除了带有$index0 的芯片。

例如，您可以看到$indexdo no update over here。

在上面的屏幕截图中，索引应该是 0，而在我删除前两个芯片后它是 2。

这是代码。

模板

<div ng-controller="BasicDemoCtrl as ctrl" layout="column" ng-cloak="" class="chipsdemoBasicUsage" ng-app="MyApp">

  <md-content class="md-padding" layout="column">
    <md-chips class="custom-chips" ng-model="ctrl.vegObjs" readonly="ctrl.readonly" md-transform-chip="ctrl.newVeg($chip)" md-removable="ctrl.removable" input-aria-label="Vegetables">
      <md-chip-template>
        <span>
          <strong>[{{$index}}] {{$chip.name}}</strong>
          <em>({{$chip.type}})</em>
        </span>
      </md-chip-template>
      <button md-chip-remove="" class="md-primary vegetablechip" aria-label="Remove {{$chip.name}}">
        <md-icon md-svg-icon="md-close"></md-icon>
      </button>
    </md-chips>

    <br>

  </md-content>
</div>

css

.chipsdemoBasicUsage .errors {
  font-size: 12px;
  color: #dd2c00;
  margin-top: 10px; }

.chipsdemoBasicUsage .custom-chips md-chip {
  position: relative; }
  .chipsdemoBasicUsage .custom-chips md-chip .md-chip-remove-container {
    position: absolute;
    right: 4px;
    top: 4px;
    margin-right: 0;
    height: 24px; }
    .chipsdemoBasicUsage .custom-chips md-chip .md-chip-remove-container button.vegetablechip {
      position: relative;
      height: 24px;
      width: 24px;
      line-height: 30px;
      text-align: center;
      background: rgba(0, 0, 0, 0.3);
      border-radius: 50%;
      border: none;
      box-shadow: none;
      padding: 0;
      margin: 0;
      transition: background 0.15s linear;
      display: block; }
      .chipsdemoBasicUsage .custom-chips md-chip .md-chip-remove-container button.vegetablechip md-icon {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate3d(-50%, -50%, 0) scale(0.7);
        color: white;
        fill: white; }
      .chipsdemoBasicUsage .custom-chips md-chip .md-chip-remove-container button.vegetablechip:hover, .chipsdemoBasicUsage .custom-chips md-chip .md-chip-remove-container button.vegetablechip:focus {
        background: rgba(255, 0, 0, 0.8); }

.chipsdemoBasicUsage .custom-chips md-chips-wrap.md-removable md-chip md-chip-template {
  padding-right: 5px; }

js

(function () {
  'use strict';
  angular
      .module('MyApp', ['ngMaterial', 'ngMessages', 'material.svgAssetsCache'])
      .config(['$mdIconProvider', function($mdIconProvider) {
        $mdIconProvider.icon('md-close', 'img/icons/ic_close_24px.svg', 24);
      }])
      .controller('BasicDemoCtrl', DemoCtrl);

  function DemoCtrl ($timeout, $q, $log) {
    var self = this;

    self.readonly = false;

    // Lists of fruit names and Vegetable objects
    self.fruitNames = ['Apple', 'Banana', 'Orange'];
    self.ngChangeFruitNames = angular.copy(self.fruitNames);
    self.roFruitNames = angular.copy(self.fruitNames);
    self.editableFruitNames = angular.copy(self.fruitNames);

    self.tags = [];
    self.vegObjs = [
      {
        'name' : 'Broccoli',
        'type' : 'Brassica'
      },
      {
        'name' : 'Cabbage',
        'type' : 'Brassica'
      },
      {
        'name' : 'Carrot',
        'type' : 'Umbelliferous'
      }
    ];

    self.newVeg = function(chip) {
      return {
        name: chip,
        type: 'unknown'
      };
    };

    self.onModelChange = function(newModel) {
      $log.log('The model has changed to ' + newModel + '.');
    };
  }
})();

这是笔。

标签： angularjsmaterial-design

Answer 1

您可以使用自定义函数来获取如下索引。

self.getIndex = function(chipName) {

      for (var i = 0; i < self.vegObjs.length; i++) {

        if (self.vegObjs[i].name === chipName) {
          return i;
        }
      }
    }

<md-chip-template>
        <span>
          <strong>[{{ctrl.getIndex($chip.name)}}] {{$chip.name}}</strong>
          <em>({{$chip.type}})</em>
        </span>
      </md-chip-template>