Angularjs从多个复选框中选择两个复选框

时间:2015-11-17 11:37:27

标签: angularjs checkbox

我只需要从给定的多个复选框中选中两个复选框,而不是嵌入在列表中。

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

以上是我的复选框,我需要以角度方式从中选择两个。

1 个答案:

答案 0 :(得分:1)

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

以下脚本应该执行您要查找的内容

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;
        }
    })

&#13;
&#13;
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;
    }
  })
&#13;
<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>
&#13;
&#13;
&#13;