Question

我是Angularjs的新手。我使用Angularjs创建了一个表。我从控制器填充表的内容，并在html中使用ng-repeat来呈现数据。

我还需要处理复选框检查事件并在控制器中填充数组。我在视图中添加了复选框。我能够绑定内容，但是当我检查时无法处理复选框事件时。如何在Angularjs中处理这个问题。我添加了var form = document.getElementsByTagName('form')[0]; form.addEventListener('submit',function(event){ event.preventDefault(); var data = { "name":this.name.value, "age":this.age.value }; console.log(data); });和ng-change，但我希望从ng-model函数中填充所选的复选框ID。目前只要有更改事件，就会使用id调用该函数，但我不知道是否在未选中时选中了复选框。我哪里错了？

用户界面的代码

$scopr.update

在控制器中：

<div class="ibox-content">
  <div class="row">
    <div class="col-sm-4 m-b-xs">
      <div data-toggle="buttons" class="btn-group">
        <label class="btn btn-sm btn-white"> <input type="radio" id="option1" name="options">10</label>
         <label class="btn btn-sm btn-white"> <input type="radio" id="option2" name="options">25</label>
         <label class="btn btn-sm btn-white"> <input type="radio" id="option3" name="options">50</label>
       </div>
     </div>
     <div class="col-sm-3 pull-right">
       <div class="input-group">
         <div class="input-group-addon"><i class="fa fa-search"></i></div>
           <input type="text" class="form-control" placeholder="Search Host" ng-model="name">
         </div>
       </div>
     </div>
     <div class="table-responsive">
       <table class="table table-striped table-bordered">
         <thead>
           <tr>
             <td>Select</td>
               <td>
                 <a href="#" ng-click="sortType = 'name'; sortReverse = !sortReverse">
                      Hostname
                   <span ng-show="sortType == 'name' && !sortReverse" class="fa fa-caret-down"></span>
                   <span ng-show="sortType == 'name' && sortReverse" class="fa fa-caret-up"></span>
                 </a>
                </td>
                <td>
                  <a href="#" ng-click="sortType = 'application'; sortReverse = !sortReverse">
                          Application
                    <span ng-show="sortType == 'application' && !sortReverse" class="fa fa-caret-down"></span>
                    <span ng-show="sortType == 'application' && sortReverse" class="fa fa-caret-up"></span>
                  </a>
                  </td>
                  <td>
                    <a href="#" ng-click="sortType = 'environment'; sortReverse = !sortReverse">
                          Environment
                      <span ng-show="sortType == 'environment' && !sortReverse" class="fa fa-caret-down"></span>
                      <span ng-show="sortType == 'environment' && sortReverse" class="fa fa-caret-up"></span>
                    </a>
                  </td>
              </tr>
            </thead>
            <tbody>
              <tr dir-paginate="host in newHosts | orderBy:sortType:sortReverse | filter:name | itemsPerPage: 10
        " pagination-id="host">
                  <td><input type="checkbox" ng-change="update(host.id)" ng-model="host_id"/></td>
                  <td>{{host.name}}</td>
                  <td>{{host.application}}</td>
                  <td>{{host.environment}}</td>
                </tr>
              </tbody>
          </table>
        </div>
      </div>

Answer 1

首先，将ng-click添加到您的复选框

<td><input type="checkbox" ng-click=update(host)/></td>

然后调用控制器中的更新功能

$scope.update = function(host){
   var hostIndex = $scope.selectedHost.indexOf(host);
   if(hostIndex == -1) {
      $scope.selectedHost.push(host); //Add the selected host into array
   } else {
      $scope.selectedHost.splice(hostIndex, 1); //Remove the selected host
   }
}

Answer 2

你可以通过 $ index 向该函数发送inde，它会给你所选行的确切索引，以便您可以从数组中获取它，以及你可以通过使用它来做更多的代码，你不需要得到 index（在某些情况下不能获得正确索引的概率）

<td><input type="checkbox" ng-click=update($index)/></td>


$scope.update = function(hostIndex){
   var host= $scope.selectedHost[hostIndex];
   if(hostIndex == -1) {
      $scope.selectedHost.push(host); //Add the selected host into array
   } else {
      $scope.selectedHost.splice(hostIndex, 1); //Remove the selected host
   }
}

从Angularjs中的表中选择复选框ID

2 个答案: