CODEWITHSUNDEEP
angularjscheckbox
kanaiya shree
kanaiya shree

Reputation: 1

Angularjs Selecting two checkboxes from multiple checkboxes

I need to select only two check boxes from the given multiple checkboxes and are not embedded in the list.

<input type="checkbox" class="two-checkbox" id="curr-EUR" ng-model="reqObject.EUR" ng-click="checkChanged()">EUR</input>
<input type="checkbox" class="two-checkbox" id="curr-JPY" ng-model="reqObject.JPY" ng-click="checkChanged()">JPY</input>
<input type="checkbox" class="two-checkbox" id="curr-INR" ng-model="reqObject.INR" ng-click="checkChanged()">INR</input>
<input type="checkbox" class="two-checkbox" id="curr-USD" ng-model="reqObject.USD" ng-click="checkChanged()">USD</input>

The above are my checkboxes and I need to select only two from them in angular way.

Upvotes: 0

Views: 930

Answers (1)

potatopeelings
potatopeelings

Reputation: 41075

With HTML

<div ng-app="myApp">
    <div ng-controller="myCtrlr">
        <input type="checkbox" class="two-checkbox" id="curr-EUR" ng-model="reqObject.EUR" ng-click="checkChanged('EUR')">EUR</input>
        <input type="checkbox" class="two-checkbox" id="curr-JPY" ng-model="reqObject.JPY" ng-click="checkChanged('JPY')">JPY</input>
        <input type="checkbox" class="two-checkbox" id="curr-INR" ng-model="reqObject.INR" ng-click="checkChanged('INR')">INR</input>
        <input type="checkbox" class="two-checkbox" id="curr-USD" ng-model="reqObject.USD" ng-click="checkChanged('USD')">USD</input>
    </div>
</div>

the following script should do what you are looking for

angular.module('myApp', [])
    .controller('myCtrlr', function ($scope) {

        var arr = [undefined, undefined];

        $scope.reqObject = {
            EUR   : false,
            JPY   : false,
            INR   : false,
            USD   : false
        }

        $scope.checkChanged = function (v) {
            var key = arr.shift();
            if (key)
                $scope.reqObject[key] = false;

            arr.push(v);
            $scope.reqObject[v] = true;
        }
    })


angular.module('myApp', [])
  .controller('myCtrlr', function($scope) {

    var arr = [undefined, undefined];

    $scope.reqObject = {
      EUR: false,
      JPY: false,
      INR: false,
      USD: false
    }

    $scope.checkChanged = function(v) {
      var key = arr.shift();
      if (key)
        $scope.reqObject[key] = false;

      arr.push(v);
      $scope.reqObject[v] = true;
    }
  })
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
    <div ng-app="myApp">
        <div ng-controller="myCtrlr">
            <input type="checkbox" class="two-checkbox" id="curr-EUR" ng-model="reqObject.EUR" ng-click="checkChanged('EUR')">EUR</input>
            <input type="checkbox" class="two-checkbox" id="curr-JPY" ng-model="reqObject.JPY" ng-click="checkChanged('JPY')">JPY</input>
            <input type="checkbox" class="two-checkbox" id="curr-INR" ng-model="reqObject.INR" ng-click="checkChanged('INR')">INR</input>
            <input type="checkbox" class="two-checkbox" id="curr-USD" ng-model="reqObject.USD" ng-click="checkChanged('USD')">USD</input>
        </div>
    </div>

Upvotes: 1

Related Questions