2015-10-07 93 views
2

我正在使用我的應用程序中的角度材質複選框。我在將值分配給複選框時遇到了問題。如何在angularjs中爲角度材質複選框賦值

<div ng-repeat="rules in rulesList1.data.hits.hits"> 
    <md-checkbox md-no-ink aria-label="Checkbox No Ink" id="chkR1" ng-checked="_source.Enabled" class=" md-primary"> 
    </md-checkbox> 
</div> 

當我使用它時,我的複選框變爲不可編輯。我無法檢查或取消選中使用上述代碼的框。我不知道我哪裏錯了。

在此先感謝。

+0

你沒有使用'NG-model'。 –

+0

我也嘗試過使用ng-model,但那不適用於我。這就是爲什麼我改爲ng檢查 – Mangoski

+0

你可以創建一個小提琴來解釋你的問題。 –

回答

1

我的問題就解決了。問題是當我檢索它的字符串格式的值。在將其分配給視圖ng-model之前,將該字符串轉換爲布爾值。

轉換爲布爾值後,我的複選框工作正常。

更新代碼

<div ng-repeat="rules in rulesList1.data.hits.hits"> 
    <md-checkbox md-no-ink aria-label="Checkbox No Ink" id="chkR1" ng-model="_source.Enabled" class=" md-primary"> 
    </md-checkbox> 
</div> 
0

看看這個:

<html lang="en" ng-app="StarterApp"> 
 
<head> 
 
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.9.4/angular-material.min.css"> 
 
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=RobotoDraft:300,400,500,700,400italic"> 
 
    <meta name="viewport" content="initial-scale=1" /> 
 
</head> 
 
<body layout="column" ng-controller="AppCtrl"> 
 
    <div ng-app="StarterApp" ng-repeat="rules in items"> 
 
     Test {{rules}}: 
 
     <md-checkbox md-no-ink aria-label="Checkbox No Ink" id="chkR1" class=" md-primary" ng-checked="rules.ck" ng-click="rules.ck=!rules.ck" ng-disabled="{{!rules.editable}}" role="checkbox"> 
 
     </md-checkbox> 
 
    </div> 
 

 
    <!-- Angular Material Dependencies --> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.9.4/angular-material.min.js"></script> 
 
</body> 
 
    <script> 
 
     var app = angular.module('StarterApp', ['ngMaterial']); 
 

 
     app.controller('AppCtrl', ['$scope', function($scope){ 
 
      $scope.items = [{ck:true, editable:false}, {ck:true, editable:true}, {ck:false, editable:true}]; 
 
     }]); 
 
    </script> 
 
</html>