如何获得angularjs中的复选框值和无线电值 [英] how to get both checkbox value and radio value in angularjs

问题描述

这是 MY PLUNKER

<在我的json中有一个条件是它的成分的最小值等于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> 
  

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

解决方案

我已将您的plunker更新为一个有效的示例

让我引导您完成必须解决你的问题。如果已经将可以选择的成分列表放入指令中以便于扩展和可读性。

首先需要做的是确保单个值是呈现为单选按钮和多个值作为复选框。为此我做了同样的检查：

  //检查配料是否应显示为单选按钮或复选框
 scope.inputType = scope.ingredientType.minVal == 1？ radio：复选框; 
  

这允许我使用以下模板作为单选按钮或复选框呈现成分（忽略现在 ng-checked 和 ng-click ：

 < ul class =col-xs-12 form-groupng-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的原因）：

  //设置初始选择值。因为我们需要有可能选择多个值，所以这是一个数组
 scope.ingredientType.selection = []; 
 
 //单击成分触发的功能。单击的项目将传递给该函数。 
 //如果允许多个值，则检查该项是否已被选中。这意味着我们应该从选择中删除它。 
 //如果只允许一个值，则将单个值数组设置为控件的选择。 
 scope.toggleSelection = function（clickedItem）{
 var value = clickedItem.ingredientName; 
 
 //允许多个值
 if（scope.inputType ===checkbox）{
 //检查选中的点击项是否存在
 var index = scope.ingredientType.selection.indexOf（value）; 
 
 //它不存在
 if（index === -1）{
 scope.ingredientType.selection.push（value）; 
} else {
 //它已经存在，所以它应该被删除
 scope.ingredientType.selection.splice（index，1）; 
} 
} else {
 //只允许一个值
 scope.ingredientType.selection = [value]; 
} 
} 
  

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

  //检查项目是否被选中的函数。 
 //此功能正在模板中用于向用户显示他是否选择了某个项目。 
 //  - > ng-checked 
 scope.valueIsSelected = function（item）{
 var value = item.ingredientName; 
 
 //检查所选项中是否存在被点击的项目
 var index = scope.ingredientType.selection.indexOf（value）; 
 
返回索引> -1; 
} 
  

因为我们在配料中添加了一个属性，所以可以通过整个角度应用程序，无需使用收集所选项目的按钮。

hi this is MY PLUNKER

there is a condition in my json is it"s min value of the ingredients is equal to one means it will change to radio and if it"s greater than one means will change to checkbox ..

to show it as radio

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

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

to show it as checkbox

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

how to get both values and save to an array ?

解决方案

I've updated your plunker to a working example

Let me guide you through what was necessary to fix your problem. If have put the list of ingredients that can be selected into a directive for easy scaling and readability.

The first thing that needed to be done was make sure that single values are rendered as a radio button and multiple values as a checkbox. For this I do the same check as you did:

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

This allowed me to render the ingredients either as a radio button or checkbox with the following template (ignore the ng-checked and ng-click for now):

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

The next step is keeping track of the selection in code. This is quite tricky because in case of a radio button we can simply use ng-model but for supporting checkboxes as well, we need to keep track of the selection in the code. For this I introduced a property on the ingredient to an empty array and I've added a function to the directive that is triggered by clicking the radio button or checkbox (this is why the template contains an 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];
  }
}

Finally, we need to make sure that the selected values are presented to the user so he knows what he selected. This can be achieved by using the ng-check directive and making a call to a function in our own directive 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;
}

Because we added a property to the ingredient, this can be accessed through the entire angular application and there's no need to have a button that collects the selected items.

这篇关于如何获得angularjs中的复选框值和无线电值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！