如何根據Angular JS中選中的復選框獲取表行值

Question

我的桌子上有checkbox ， radio button和input box 。 我無法根據所選值獲取值。

我要總結所選項目

HTML代碼

<table class="table">
    <thead class="thead-inverse">
        <tr>
            <th>Phases</th>
            <th>Select Phase</th>
            <th>Mark Primary Phase</th>
            <th>Enter % of efforts with respect to primary phase</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat = "phase in phase.subjects">
            <td style="text-align:left;padding-left:2px;" ng-model="phaseName">
                 {{ phase.name }}
            </td>
            <td>
                <input type="checkbox" value="{{ phase.name }} ng-model="myVar"">
            </td>
            <td>
                <input type="radio" name="optradio">
            </td>
            <td>
                <input type="number" class="form-control" id="usr">
            </td>
        </tr>
    </tbody>
</table>
<div class = "col-lg-12 col-md-12" style="margin-top:12px;" >
    <div style="text-align:center !important;">
        <div class = "col-lg-2 col-md-2" ></div>
        <div class = "col-lg-3 col-md-3" >
            <button type="button" id="btnTSBack" class="btnWidth btn btn-Back" >
               Back
            </button>
        </div>
        <div class = "col-lg-3 col-md-3" >
            <button type="button" id="btnTSBack" class="btnWidth btn btn-Back" >
               Save Draft
             </button>
        </div>
        <div class = "col-lg-3 col-md-3" >
             <button type="button" id="btnTSNext" class="btnWidth btn btn-default" >
               Next
             </button>
        </div>
    </div>
</div>

Angular.js

 var mainApp = angular.module("mainApp", []);

         mainApp.controller('phaseSelection', function($scope) {
            $scope.phase = {
               firstName: "phase",
               subjects:[
                  {name:'Startup'},
                  {name:'Environment setup'},
                  {name:'Requirement gathering'},
                  {name:'Design'},
                  {name:'Development & Unit Testing'},
                  {name:'System integration testing'},
                  {name:'Development & Unit Testing'},
                  {name:'Deployment / Rollout'},
                  {name:'Documentation – User Guide & Present'}
               ],

            };
         });

我想在選擇checkbox獲取整個行的值。

Answer 1

不確定這是否是最佳解決方案，但您可以選擇

<tr ng-repeat="item in test.items">
   <td>
      <input type="checkbox" ng-true-value="'{{item.name}}'" ng-model="selectedValues[$index]"/>
   </td>    
</tr>

https://jsfiddle.net/Aides/L4he399L/

Answer 2

在“主題”數組中創建屬性“ IsChecked”，並在方法上創建復選框更改，例如-

角js-

 var mainApp = angular.module("mainApp", []);

             mainApp.controller('phaseSelection', function($scope) {
                $scope.phase = {
                   firstName: "phase",
                   subjects:[
                      {name:'Startup',IsChecked:false},
                      {name:'Environment setup',IsChecked:false},
                      {name:'Requirement gathering',IsChecked:false},
                      {name:'Design',IsChecked:false},
                      {name:'Development & Unit Testing',IsChecked:false},
                      {name:'System integration testing',IsChecked:false},
                      {name:'Development & Unit Testing',IsChecked:false},
                      {name:'Deployment / Rollout',IsChecked:false},
                      {name:'Documentation – User Guide & Present',IsChecked:false}
                   ],

                };
    $scope.checkBoxChange=function(currentrow)
    {
    if(currentrow.IsChecked==true)
    {
    // your code here
    // console.log(currentrow.name);
    }
    }
             });

現在，將您的復選框與此屬性綁定-

 <input type="checkbox" ng-model="phase.IsChecked" ng-change="checkBoxChange(phase)">

您將在控制器上獲得選定的行。