将多个随机单选按钮值发送到 AngularJS 中的控制器答案

【问题标题】：Send multiple random radio button values to controller in AngularJS将多个随机单选按钮值发送到 AngularJS 中的控制器
【发布时间】：2016-05-05 15:01:31
【问题描述】：

我使用 Monaca、Onsen UI 和 AngularJS 构建了一个跨平台应用程序。

在一个页面上，我有一个项目列表，每个项目都有一个单选按钮的子列表，如下所示在我的 view.html

中创建

<ul class="list">
    <li class="list__item" ng-repeat="checkItemDescription in data">
        <span class="list__item__line-height"><strong>{{checkItemDescription.checkitemdesc}}</strong></span>

        <label class="radio-button" ng-repeat="option in checkItemDescription.options">
            <input type="radio" 
                name="option_question_{{option.fleetcheckitemid}}" 
                ng-model="option.fleetcheckid">
            <div class="radio-button__checkmark"></div>
            {{option.checkvaluedesc}}
        </label>
    </li>
</ul>

列表按照我的意愿构建和显示，用户可以单击单选按钮的和来选择它们。

当用户选择任何项目上的任何单选按钮时，我需要保存“checkItemDescription”ID 以及“option.fleetcheckid " 到一个 JSON 对象。我的项目列表可以是任意长度，我需要将每个列表项目作为 JSON 对象发送到我的数据库。

当我的 ng-model 仅包含“”的值时，如何向机器人发送“checkItemDescription”ID 以及“option.fleetcheckid” option.fleetcheckid"

【问题讨论】：

一种选择是使用 ng-click 并将两个值都传递给它，例如 ng-click=doSomething(checkItemDescription, fleetCheckId)。在此方法中，您会将值发布到数据库中。或者，如果您不介意 hacky，您可以使用 ng-model 进行隐藏输入。 <input type="hidden" value="checkItemDescription" ng-model="option.checkItemDescription">

标签： javascript jquery angularjs json

【解决方案1】：

如果目的是使用一次，你可以使用ng-hide并传递变量$scope.InputSet然后ng-change，在调用的函数上将$scope.InputSet 设置为true 和您需要的逻辑。

<ul class="list" ng-hide="inputSet">
    <li class="list__item" ng-repeat="checkItemDescription in data">
        <span class="list__item__line-height"><strong>{{checkItemDescription.checkitemdesc}}</strong></span>

        <label class="radio-button" ng-repeat="option in checkItemDescription.options">
            <input type="radio" 
                name="option_question_{{option.fleetcheckitemid}}" 
                ng-model="option.fleetcheckid" 
                ng-change="funcToCall(checkItemDescription.id, option.fleetcheckitemid)">
            <div class="radio-button__checkmark"></div>
            {{option.checkvaluedesc}}
        </label>
    </li>
</ul>

控制器

$scope.funcToCall = function(checkItemDescription.id, option.fleetcheckitemid){
  $scope.inputSet = true;
  //Your logic...
};

如果您只想删除该复选框，则必须传递该选项并将其删除

$scope.funcToCall = function(checkItemDescription.id, option){
  // no need to use ng-hide here
  $scope.optionId = option.id;
    //remove the option
  delete option;
    //Your logic...
};

这应该可行。

【讨论】：