Angular js複選框

Question

我想根據與其關聯的複選框打印數組的值。請看下面

的Javascript代碼：

var app = angular.module('myApp', []); 
app.controller('myCtrl', function($scope) { 
    $scope.firstName= [{name:"John",selected:"false"},{name:"Anil",selected:"false"},{name:"Kumar",selected:"false"}]; 
    $scope.lastName= "Doe"; 
    $scope.name1=[], 
    $scope.addname=function(){ 
    angular.forEach($scope.firstName, function(name,selected){ 
    if(selected=="true") { 
    alert(name); 
    $scope.name1.push(name) 
    } 
}); 
} 
}); 

HTML：

<div ng-app="myApp" ng-controller="myCtrl"> 
<table > 

<tr ng-repeat="first in firstName"> 
<td><input type="Checkbox" ng-model="first.selected">{{first.name}}</td> 

</tr> 
<tr><td><input type="Button" ng-click="addname()" value="Submit" ng-model="lastName"></td></tr> 

<tr ng-repeat="nam in name1">{{nam}}</tr> 
</table> 
</div> 

Answer 1

• 保持selected值Boolean比String
• 在forEach，第一個參數是Object，訪問相關的model與它使用name.selected
• 初始化name1陣列中ng-click處理機

var app = angular.module('myApp', []); 
 
app.controller('myCtrl', function($scope) { 
 
    $scope.firstName = [{ 
 
    name: "John", 
 
    selected: false 
 
    }, { 
 
    name: "Anil", 
 
    selected: false 
 
    }, { 
 
    name: "Kumar", 
 
    selected: false 
 
    }]; 
 
    $scope.lastName = "Doe"; 
 
    $scope.addname = function() { 
 
    $scope.name1 = []; 
 
    angular.forEach($scope.firstName, function(name, selected) { 
 
     if (name.selected) { 
 
     $scope.name1.push(name) 
 
     } 
 
    }); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myApp" ng-controller="myCtrl"> 
 
    <table> 
 
    <tr ng-repeat="first in firstName"> 
 
     <td> 
 
     <input type="Checkbox" ng-model="first.selected">{{first.name}}</td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <input type="Button" ng-click="addname()" value="Submit" ng-model="lastName"> 
 
     </td> 
 
    </tr> 
 
    <tr ng-repeat="nam in name1">{{nam}}</tr> 
 
    </table> 
 
    {{name1}} 
 
</div>

Answer 2

var app = angular.module('myApp', []); 
 
app.controller('myCtrl', function($scope) { 
 
    $scope.firstName= [{name:"John",selected:false},{name:"Anil",selected:false},{name:"Kumar",selected:false}]; 
 
    $scope.lastName= "Doe"; 
 
    $scope.name1=[]; 
 
    $scope.addname=function(){ 
 
    angular.forEach($scope.firstName, function(name){ 
 
     if(name.selected === "true") { 
 
     $scope.name1.push(name); 
 
     } 
 
}); 
 
} 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myApp" ng-controller="myCtrl"> 
 
<table > 
 

 
<tr ng-repeat="first in firstName"> 
 
<td><input type="Checkbox" ng-model="first.selected" ng-true-value="true" >{{first.name}}</td> 
 

 
</tr> 
 
<tr><td><input type="Button" ng-click="addname()" value="Submit" ng-model="lastName"></td></tr> 
 
<tr ng-repeat="nam in name1"><td>{{nam}}</td></tr> 
 

 
</table> 
 
</div>