javascript - 如何在angularjs中获取复选框值和单选值

Question

嗨，这是 MY PLUNKER

我的 json 中有一个条件，成分的最小值等于 1 意味着它将更改为单选框，如果它大于 1 则意味着将更改为复选框..

将其显示为广播

 ng-if="get_ingredientTypeName_values.minVal == 1"

<input id="{{get_option_names_price.ingredientTypeId}}_{{$index}}" name="{{get_option_names_price.ingredientTypeId}}" type="radio">

将其显示为复选框

ng-if="get_ingredientTypeName_values.minVal == null">
  <input id="{{get_option_names_price.ingredientTypeId}}_{{$index}}" name="{{get_option_names_price.ingredientTypeId}}" type="checkbox">

如何获取这两个值并保存到数组中？

Answer 1

I've updated your plunker to a working example

让我指导您完成解决问题所需的步骤。如果将可以选择的成分列表放入指令中，以便于扩展和可读。

需要做的第一件事是确保单个值呈现为单选按钮，多个值呈现为复选框。为此，我做了与您相同的检查:

// Check if the ingredients should be displayed as a radio button or a checkbox
scope.inputType = scope.ingredientType.minVal == 1 ? "radio" : "checkbox";

这使我可以使用以下模板将成分呈现为单选按钮或复选框(暂时忽略 ng-checked 和 ng-click):

<ul class="col-xs-12 form-group" ng-repeat="get_option_names_price in ingredientType.ingredientList ">
  <li><input type="{{ inputType }}" ng-checked="valueIsSelected(get_option_names_price)" value="{{ get_option_names_price.productId }}" ng-click="toggleSelection(get_option_names_price)">{{get_option_names_price.ingredientName}}, $ {{get_option_names_price.ingredientPrice}}</li>
</ul>

下一步是在代码中跟踪选择。这非常棘手，因为对于单选按钮，我们可以简单地使用 ng-model ，但为了支持复选框，我们需要跟踪代码中的选择。为此，我向空数组引入了成分的属性，并向指令添加了一个通过单击单选按钮或复选框触发的函数(这就是模板包含 ng-click):

// Set the initial selection value. Because we need to have the possibility to select multiple values, this is an array
scope.ingredientType.selection = [];

// Function that is triggered by clicking an ingredient. The clicked item is passed to the function.
// If multiple values are allowed, a check is being made whether the item was already selected. This means we should remove it from the selection.
// If only one value is allowed, a single value array is set as the selection of the control.
scope.toggleSelection = function(clickedItem){
  var value = clickedItem.ingredientName;

  // Multiple values are allowed
  if(scope.inputType === "checkbox"){
    // Check if the clicked item exists in the selection
    var index = scope.ingredientType.selection.indexOf(value);

    // It doesn't exist
    if(index === -1){
      scope.ingredientType.selection.push(value);
    } else {
      // It already exists, so it should be removed
      scope.ingredientType.selection.splice(index, 1);
    }
  } else {
    // Only one value is allowed
    scope.ingredientType.selection = [value];
  }
}

最后，我们需要确保将所选值呈现给用户，以便他知道他选择了什么。这可以通过使用 ng-check 指令并调用我们自己的指令 Controller 中的函数来实现:

// Function that checks whether an item is selected. 
// This function is being used in the template to show the user whether he has selected an item or not.
// -> ng-checked
scope.valueIsSelected = function(item){
  var value = item.ingredientName;

  // Check if the clicked item exists in the selection
  var index = scope.ingredientType.selection.indexOf(value);

  return index > -1;
}

因为我们向成分添加了一个属性，所以可以通过整个 Angular 应用程序访问该属性，并且不需要有一个收集所选项目的按钮。