angularjs - 如何禁用角材料组件 md-chips？

Question

我已经阅读了角度材料文档，它们具有只读属性来禁用该元素。但我无法让它工作，还有其他我可以使用的 Angular Material 方法吗？我想默认禁用元素。main.html

<div layout="row" layout-margin>
   <md-input-container flex="100" class="notifyUser-chips">
       <label>Bcc</label>
       <br>
       <md-chips flex="100"
                 ng-model="notifyCtrl.bcc"
                 name="email"
                 readonly="true">
       </md-chips>
       <p style="color:red" ng-show="patternError">An email must contain a-z, A-Z, 0-9, or _ characters</p>
   </md-input-container>
</div>

Answer 1

我在这个小提琴中复制了你的代码，对我来说它工作正常。

<div ng-app="myApp">
  <div ng-controller="MyCtrl">
    <div layout="column" layout-margin>
        Readonly
        <md-chips ng-model="bcc"
                  name="email"
                  readonly="true">
        </md-chips>

        Not readonly
        <md-chips ng-model="bcc"
                  name="email">
        </md-chips>
    </div>
  </div>
</div>

var myApp = angular.module('myApp',['ngMaterial']);

myApp.controller("MyCtrl", ["$scope","$rootScope", function($scope,$rootScope){
      $scope.bcc = ['Broccoli','Cabbage','Carrot'];
   }
]);

检查您的角度材料和角度版本。

Answer 2

如果您有 ng-model，angular-material 将始终将它们视为可编辑。另外在文档中说如果没有提供 ng-model，芯片将自动标记为只读https://material.angularjs.org/latest/api /directive/mdChips。

所以这里是修复...

<md-chips flex="100">
    <md-chip ng-repeat="chip in notifyCtrl.bcc"
             name="email"
             readonly="true">{{chip}}
    </md-chip>
 </md-chips>