將此數字字符更改爲angularjs上的表格內的複選框

Question

我有這個html代碼，它使用angularjs來顯示錶中的內容。

<div ng-controller="CheckCtrl"> 
    <table class="table table-hover data-table sort display"> 
     <thead> 
     <tr> 
      <th class="Serial_"> 
       Serial 
      </th> 
      <th class="Name_"> 
       Name 
      </th> 
      <th class="ID_"> 
       ID 
      </th> 
      <th class="On_off_"> 
       On/off 
      </th> 
     </tr> 
     </thead> 
     <tbody> 
     <tr ng-repeat="item in check_items"> 
      <td>{{item.SERIAL}}</td> 
      <td>{{item.NAME}}</td> 
      <td>{{item.ID}}</td> 
      <td>{{item.ON_OFF}}</td> 
     </tbody> 
    </table> 
</div> 

該網頁看起來像這樣;

這裏是控制器的代碼。

.controller('CheckCtrl', ['$scope', '$http', 'configuration', 
    function ($scope, $http, $configuration) { 
     var url_api = $configuration.host + "cloe/webroot/cloe-cloud/app/API.json"; 
     $http.get(url_api).success(function(data) 
     { 
      $scope.check_items = data; 
     }); 

我想將開/關列數字字符更改爲複選框。如果數字字符爲'0'，則複選框未被選中。如果數字字符爲'1'，則複選框被選中。

我正在使用angularjs v1和twitter bootstrap。

編輯：對不起，我意識到我的複選框值是一個字符，而不是數字。它們是'0'，'1'而不是0,1。

Answer 1

function myCtrl($scope) { 
 
    $scope.check_items = [ { 
 
     'SERIAL':12345, 
 
     'NAME': 'ANil Kumar Ram', 
 
     'ID' : 1, 
 
     'ON_OFF': '1' 
 
    },{ 
 
     'SERIAL':6453, 
 
     'NAME': 'Rohan Ram', 
 
     'ID' : 2, 
 
     'ON_OFF': '0' 
 
    },{ 
 
     'SERIAL':732, 
 
     'NAME': 'Sunil Ram', 
 
     'ID' : 3, 
 
     'ON_OFF': '0' 
 
    },{ 
 
     'SERIAL':1261, 
 
     'NAME': 'Ram Jitesh', 
 
     'ID' : 4, 
 
     'ON_OFF': '1' 
 
    }] 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 

 
<div ng-app ng-controller="myCtrl"> 
 
    <table class="table table-hover data-table sort display" style="width:100%"> 
 
     <thead> 
 
     <tr> 
 
      <th class="Serial_"> 
 
       Serial 
 
      </th> 
 
      <th class="Name_"> 
 
       Name 
 
      </th> 
 
      <th class="ID_"> 
 
       ID 
 
      </th> 
 
      <th class="On_off_"> 
 
       On/off 
 
      </th> 
 
     </tr> 
 
     </thead> 
 
     <tbody> 
 
     <tr ng-repeat="item in check_items"> 
 
      <td>{{item.SERIAL}}</td> 
 
      <td>{{item.NAME}}</td> 
 
      <td>{{item.ID}}</td> 
 
      <td> <input type="checkbox" ng-checked="item.ON_OFF == '1'"></td> 
 
     </tbody> 
 
    </table> 
 
</div>

希望這將價值幫幫我。

Answer 2

<input type='checkbox' ng-checked='{{item.ON_OFF == 1}}'> 

認爲應該這樣做。

Answer 3

<input type="checkbox" ng-model="{{item.ON_OFF}}" ng-true-value="1" ng-false-value="0"> 

ng-true-value將設置輸入的值檢查 ng-false-value="0"，將設置輸入選中

角文檔 https://docs.angularjs.org/api/ng/input/input%5Bcheckbox%5D