Question

我想为角度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){});

Answer 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功能现在可以更加重复使用。

Answer 2

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

我想为角度js中的每个表格行添加复选框

2 个答案: