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> 

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

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

我不知道如何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。