如何根据在角度 js 中选中的复选框获取表行值

How fetch Table row values according to check box selected in angular js

本文关键字：复选框 获取 js 何根      更新时间：2023-09-26

我有checkbox、radio button和input box的表格。我无法根据所选值获取值。

我想对所选项目进行汇总

网页代码

<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>

棱角分明.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时获取整行值。

不确定这是否是最佳解决方案，但您可以选择类似

<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/

在"主题"数组中创建一个属性"IsChecked"，并在 methos 上创建复选框更改，如下所示 -

Angular 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)">

您将在控制器上获得选定的行。

相关文章：