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

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>

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

我还没有在任何地方发现类似的问题。通常开发人员面临的问题是在选中复选框时让事情发生。但是，这个案例不同。

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

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函数并将其绑定到输入的点击事件，当输入被点击时它设置相应的选择标志和Angular的两种方式绑定机制负责更新 UI.

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

AngularJS check box upon clicking on input field

checkbox

jquery

click

angularjs

angularjs-ng-repeat