我想为angular js中的每个表格行添加复选框答案

【问题标题】：I Want to add check box for every table row in angular js我想为angular js中的每个表格行添加复选框
【发布时间】：2015-08-22 16:23:32
【问题描述】：

我想在 Angular js 中为每个表格行添加复选框，并在检查时将值传递给控制器，有人可以指导我如何实现吗？？

这是我的 index1.html

<html ng-app>
<title>Angular Table</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.min.js"></script>
<script src="controllers/tableController.js"></script>
<link rel="stylesheet" href="css/mystyles.css" />
<link rel="stylesheet" type="text/css" href="ng-grid.css" />
<script src="JS/angtest.js"></script>
<body ng-controller="testcontroller">
    <table>
        <tr>
            <td>first name :</td>
            <td><input type="text" name="firstname" ng-model="firstname" />
            </td>
        </tr>
        <tr>
            <td>last name :</td>
            <td><input type="text" name="lastname" ng-model="lastname" /></td>
        </tr>
        <tr>
            <td><input type="button" ng-click="add(firstname,lastname)"
                value="Add" /></td>
        </tr>
    </table>
    <table border=1>
        <tr>My first Table
        </tr>
        <tr>
            <th>firstname</th>
            <th>lastname</th>
        </tr>
        <tr ng-repeat="names in nameslist">
            <td>{{names.firstname}} <!-- <input type="text" name="Id" ng-model="names.id"/>  -->
            </td>
            <td>{{names.lastname}} <!-- <input type="text" name="name" ng-model="names.name"/> -->
            </td>
        </tr>
        <tr>
            <td>count:</td>
            <td>{{count()}}</td>
        </tr>

    </table>
</body>
</html>

这是我的 angtest.js

var testcontroller=function($scope){


    $scope.nameslist =[];   
    $scope.add = function(fname,lname){
        $scope.nameslist.push(new user(fname,lname) );
    };

    $scope.count = function(){
         return $scope.nameslist.length;
    };
};
function user(a,b)
{
    this.firstname=a;
    this.lastname=b;
}

这是我的 tableController.js

var myAngApp =angular.module('angularTableApp',[]);
myAngApp.controller('tableController',function($scope){});

【问题讨论】：

标签： jquery angularjs node.js

【解决方案1】：

只需使用 ng-change 指令，其余与您之前的代码类似。

        <tr ng-repeat="names in nameslist">
              ... //previous td's
            <td> <input type="checkbox" ng-model="foo" ng-change="changeValue(foo)"/> </td>

        </tr>

在你的控制器中：

$scope.changeValue = function(foo) {
     console.log(foo);
 }

您不必将foo 作为参数显式传递，因为ng-model 指令会隐式地在$scope 上创建foo 属性，但无论如何建议这样做，因为changeValue 函数现在将更可重用。

【讨论】：

我应该如何将行值绑定到 foo？
行值是什么意思？您放入 ng-model 的任何内容都会绑定到您的范围

【解决方案2】：

<tr ng-repeat="names in nameslist">
        <td> <input type="checkbox" ng-model="names.firstname" /> </td>
    </tr>

【讨论】：