Wie kann man angular material component md-chips deaktivieren?

Question

Ich habe eckige Material-Dokumentation gelesen und sie haben readonly Attribut, um das Element zu deaktivieren. Aber ich kann es nicht zum Laufen bringen. Gibt es einen anderen Ansatz für Angular Material, den ich verwenden kann? Ich möchte das Element standardmäßig deaktivieren. 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

repliziert ich Ihren Code in this fiddle, für mich ist es funktioniert gut.

<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']; 
    } 
]); 

Überprüfen Sie Ihre eckigen und eckigen Versionen.

Answer 2

Wenn Sie ein ng-Modell haben, wird angular-material sie immer als bearbeitbar behandeln. Auch in der Dokumentation sagt Wenn kein ng-Modell zur Verfügung steht, werden die Chips automatisch als schreibgeschützt markiert https://material.angularjs.org/latest/api/directive/mdChips.

So, hier ist das Update ...

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