Question

我需要用单选按钮获取选定的行数据（id，name）。具体而言;

<tr data-ng-repeat=" list in listTypes">
    <td>{{list.TaskId}}</td>
    <td>{{list.Comments}}</td>
    <td>{{list.RecordDate}}</td>
    <td>{{list.StartDate}}</td>
    <td>{{list.DueDate}}</td>
    <td>{{list.AssignTo}}</td>
    <td>{{list.AssignBy}}</td>
    <td><label class="switch">
        <input type="radio" name="switch-radio1" checked="" value="0" ng-value="true" >
        <span></span>
    </label></td>
</tr>

当选择单选按钮时，我应该获得所选行的数据（taskId，comments）。我应该使用哪种功能？（特别是我需要JS部分）谢谢你的帮助。

Answer 1

您可以使用ng-model作为您的复选框，可以按如下方式使用：

<tr data-ng-repeat=" list in listTypes">
    <td>{{list.TaskId}}</td>
    <td>{{list.Comments}}</td>
    <td>{{list.RecordDate}}</td>
    <td>{{list.StartDate}}</td>
    <td>{{list.DueDate}}</td>
    <td>{{list.AssignTo}}</td>
    <td>{{list.AssignBy}}</td>
    <td>
         <label class="switch">
             <input type="radio" name="switch-radio1" ng-model="list.selected" ng-change="onTaskSelect(list)">
         </label>
    </td>
</tr>

现在你的控制器代码看起来像这样：

$scope.onTaskSelect = function(task) {
    // access your whole task object here.
    console.log(task.selected);    // will be true when you select it or else false
};

Answer 2

首先，您需要将ng-model分配给单选按钮，并将ng值更改为list.TaskId

。

<input type="radio" name="switch-radio1" ng-model="selectedItem" checked="" value="0" ng-value="list.TaskId" >

现在您已经拥有list.TaskId，您可以使用Array.prototype.filter在listTypes中查找数据

Answer 3

我找到了比其他方法更好的方法。当我们使用“ ng-model”时，不需要name属性并且由于使用了“ $ parent”，我认为访问单个模型可以充当name属性以及绑定数据的角色。因此，由于以下引号的原因，因为每个项目都有一个范围，所以我们必须具有更高的级别才能实现我们定义的单个模型。

ngRepeat指令将实例中的每个项目实例化一次模板   采集。 每个模板实例都有其自己的范围 ，其中   给定的循环变量设置为当前收集项，以及$ index   设置为项目索引或键。   https://code.angularjs.org/1.7.5/docs/api/ng/directive/ngRepeat

$ scope属性：$ parent引用父作用域。   https://code.angularjs.org/1.7.5/docs/api/ng/type/ $ rootScope.Scope＃$ parent

在模板HTML中：

<table>
    <tr data-ng-repeat=" item in listTypes">
        <td>{{list.TaskId}}</td>
        <td>{{list.Comments}}</td>
        <td>{{list.RecordDate}}</td>
        <td>{{list.StartDate}}</td>
        <td>{{list.DueDate}}</td>
        <td>{{list.AssignTo}}</td>
        <td>{{list.AssignBy}}</td>
        <td>
             <label class="switch">
                 <input type="radio"  ng-model="$parent.rdoModel" ng-value="item" >
             </label>
        </td>
    </tr>
</table>
 <button type="button" ng-click="Ok(rdoModel)">OK</button>

在Angularjs控制器脚本中：

$scope.rdoModel={};
$scope.Ok = function(item){
var data = item ; // access to all data of list item
};

如何在AngularJS中获取选定的单选按钮数据（ng-repeat）

3 个答案: