ng-repeat與角材料中的芯片

我試圖使用md芯片從用戶收集自動完成的輸入。例如：價格，可用，Y，N。其中每個組件將以籌碼呈現。每條用戶將有多個輸入。當我提交表格時，我需要用戶輸入的每行籌碼。這是我面臨的問題。ng-repeat與角材料中的芯片

<div ng-repeat ="rule in rules"> 
<md-chips ng-model="selectedHeaders"> 
<md-chip-template> 
{{$chip}} 
</md-chip-template> 
</md-chips> 
</div>

上面的代碼工作作爲我的模型只是selectheader和JS這是 $ scope.selectedHeaders = []; 我應該如何使用它來爲rule.selectheader ??。如果我將我的模型更改爲rule.selectheader，它將拋出下面的錯誤

無法設置未定義屬性'selectedHeaders'。任何解決這個問題的指針都會受到很大的影響。如果問題不明確，請詢問

來源

2017-03-16 user3514641

您是否定義了規則值？

在JS，至少規則的值必須是這樣的

var rules = [{ 
    selectedHeaders: ['Apple', 'Orange'] 
}, { 
    selectedHeaders: ['Banana'] 
}];

來源

2017-03-16 06:57:20

你可以像下面

JS代碼

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

    app.controller('ctrl1', function($scope) { 
    $scope.rules = [{ 
     name: 'rule1', 
     id: 1 
    }, { 
     name: 'rule2', 
     id: 2 
    }]; 
    $scope.data = {}; 

    });

HTML

<div ng-app='myApp'> 
    <div ng-controller='ctrl1'> 
     <div ng-repeat="rule in rules"> 
     <md-chips ng-model="data.selectedHeaders"> 
      <md-chip-template> 
      {{$chip}} 
      <!-- for testing-->{{rule}} 
      </md-chip-template> 
     </md-chips> 
     </div> 
    </div> 
    </div>

這是鏈接Jsfiddle demo

來源

2017-03-16 07:00:32

ng-repeat與角材料中的芯片

回答

相關問題