Angularjs - how to make checkbox work as select do?

Question

i'm not sure how to explain that but If im not mistaken angularJS binds under the hood all values (options) autmatically so when the user select something from the list then it gets populated via model, right?

How can I achive something like that with checkbox? I would want to have select for more than 1 value and then a checkbox instead if there is only one but without changing to much in the code.

So my select looks like this right now:

<div ng-repeat="event in allElements"
  <select ng-model="event.selectedElement" ng-change="updateSelectedElements(event);"
     <option value>Select date</option>
     <option value>{[{ getDate(event.elements) }]}</option>
  </select>
</div>

updateSelectedElements is just a function that does some stuff with the list.

How can I use the same logic but with checkbox? So if checkbox is optin it would 'bind' that selected elemented exactly like select does? The reason why I'm kinda lost is that checkbox value is only true/false but select actually has the list element as an option, right?

Tried something like:

<input type="checkbox" ng-model="event.selected" ng-change="updateSelectedElements(event)" />

but unfortunately i get null for event.selectedElement whereas for select it works. Do I need to set that event.selectedElement manually via some function? I'm not sure how it works.

have a look to this link https://stackoverflow.com/questions/14514461/how-do-i-bind-to-list-of-checkbox-values-with-angularjs — Rahul, Aug 14 '21 at 18:27

score 0 · Answer 1 · answered Aug 14 '21 at 18:29

You may try something like this:

<input type='checkbox' ng-repeat="fruit in fruits"
  ng-checked="checkedFruits.indexOf(fruit) != -1" ng-click="toggleCheck(fruit)">


  function SomeCtrl ($scope) {
    $scope.fruits = ["apple, orange, pear, naartjie"];
    $scope.checkedFruits = [];
    $scope.toggleCheck = function (fruit) {
        if ($scope.checkedFruits.indexOf(fruit) === -1) {
            $scope.checkedFruits.push(fruit);
        } else {
            $scope.checkedFruits.splice($scope.checkedFruits.indexOf(fruit), 1);
        }
    };
}

For Ref: Link 1 Link 2

Angularjs - how to make checkbox work as select do?

1 Answers1