在AngularJS中向控制器发送多个随机单选按钮值

Send multiple random radio button values to controller in AngularJS

本文关键字：随机 单选按钮 AngularJS 控制器      更新时间：2023-09-26

我使用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.freetcheckid"保存到JSON对象中。我的项目列表可以是任何长度，我需要将每个列表项目作为JSON对象发送到我的数据库。

当我的ng模型只包含"option.freetcheckid"

的值时，我如何向bot发送"checkItemDescription"ID以及"options.freetchackid"

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

<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...
};

这应该行得通。

相关文章：