Question

我的HTML页面中有以下代码，带有非常标准的控制器。

<table class="table table-striped">
    <tr>
        <th>Item ID</th>
        <th>1st Value</th>
        <th>2nd Value</th>
    </tr>
    <tr ng-repeat="(id, values) in myItemList">
        <td> <input type="checkbox" ng-model="selected[id]">  {{id}}</td>
        <td> <input type="number" ng-model="values.first"></td>
        <td> <input type="number" ng-model="values.second"></td>
    </tr>
</table>

在上面的代码中，只有在单击复选框时才会选择项目。但是，我希望当用户点击任何特定行的两个数字输入字段中的任何一个时，都会检查相关的复选框。

我没有发现任何类似的问题。通常，开发人员面临的问题是在选中复选框时会发生某些事情。但是，这种情况不同。

我不知道AngularJS如何帮助我解决这个问题，因为行是在ng-repeat循环中显示的。有什么建议吗？

Answer 1

你可以这样做：

HTML：

 <div ng-app="testApp">
<div ng-controller="testController">
    <table class="table table-striped">
        <tr>
            <th>Item ID</th>
            <th>1st Value</th>
            <th>2nd Value</th>
        </tr>
        <tr ng-repeat="(id, values) in myItemList">
            <td> <input type="checkbox" ng-model="selected[id]">  {{id}}</td>
            <td> <input type="number" ng-click="selectRow(id);" ng-model="values.first"></td>
            <td> <input type="number" ng-click="selectRow(id);" ng-model="values.second"></td>
        </tr>
    </table>
</div>

控制器代码：

var app = angular.module('testApp', []);
app.controller('testController', function ($scope) {
    $scope.myItemList = [{ first: 'aaa', second: 'bbbb' }, { first: 'aa1', second: 'bbb1' }, { first: 'aa2', second: 'bbb2' }];
    $scope.selected = [false, false, false];
    $scope.selectRow = function (id) {
        $scope.selected[id] = true;
    }
});

JSFiddle：https://jsfiddle.net/ffxddsre/

正如您所看到的，我所做的只是添加一个selectRow函数并将其绑定到输入的click事件，当单击输入时它设置相应的选定标志，Angular的双向绑定机制负责更新UI

单击输入字段时，AngularJS复选框

1 个答案: