How To Get Both Checkbox Value And Radio Value In Angularjs

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 ch

Solution 1:

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><inputtype="{{ 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 allowedif(scope.inputType === "checkbox"){
    // Check if the clicked item exists in the selectionvar index = scope.ingredientType.selection.indexOf(value);

    // It doesn't existif(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 selectionvar 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.