选中复选框时,如何将值分配给特定数字

时间:2017-11-16 06:40:46

标签: javascript angularjs

我的HTML页面中有以下复选框: -

<label>ORDER TYPE - Today</label>
<div class="col-sm-12">
    <md-checkbox ng-model="obj.roles.order.today" class="md-primary md-hue-2 col-sm-1">Regular</md-checkbox>
    <md-checkbox ng-model="obj.roles.order.today" class="margin-left md-primary md-hue-2 col-sm-2">Special Terms</md-checkbox>
    <md-checkbox ng-model="obj.roles.order.today" class="md-primary md-hue-2 col-sm-1 no-right-padding">Stop</md-checkbox>
    <md-checkbox ng-model="obj.roles.order.today" class="md-primary md-hue-2 col-sm-1">Odd</md-checkbox>
    <md-checkbox ng-model="obj.roles.order.today" class="md-primary md-hue-2 col-sm-1">Limit</md-checkbox>
    <md-checkbox ng-model="obj.roles.order.today" class="md-primary md-hue-2 col-sm-1">Auction</md-checkbox>
    <md-checkbox ng-model="obj.roles.order.today" class="md-primary md-hue-2 col-sm-1">Call</md-checkbox>
    <md-checkbox ng-model="obj.roles.order.today" class="margin-left md-primary md-hue-2 col-sm-2">Modification</md-checkbox>
    <md-checkbox ng-model="obj.roles.order.today" class="md-primary md-hue-2 col-sm-2">Others</md-checkbox>
</div>
<label>VALIDITY TYPE - Today</label>
<div class="col-sm-12">
    <md-checkbox ng-model="obj.roles.validity.today" class="md-primary md-hue-2 col-sm-1">Pro</md-checkbox>
    <md-checkbox ng-model="obj.roles.validity.today" class="margin-left md-primary md-hue-2 col-sm-2">Client</md-checkbox>
    <md-checkbox ng-model="obj.roles.validity.today" class="md-primary md-hue-2 col-sm-1 no-right-padding">Participants</md-checkbox>
    <md-checkbox ng-model="obj.roles.validity.today" class="md-primary md-hue-2 col-sm-1">WHS</md-checkbox>
    <md-checkbox ng-model="obj.roles.validity.today" class="md-primary md-hue-2 col-sm-1">Buyback</md-checkbox>
    <md-checkbox ng-model="obj.roles.validity.today" class="margin-left md-primary md-hue-2 col-sm-2">SPLCLI</md-checkbox>
</div>
<label>CLIENT TYPE - Today</label>
<div class="col-sm-12">
    <md-checkbox ng-model="obj.roles.client.today" class="md-primary md-hue-2 col-sm-1">Day</md-checkbox>
    <md-checkbox ng-model="obj.roles.client.today" class="margin-left md-primary md-hue-2 col-sm-2">IOC</md-checkbox>
    <md-checkbox ng-model="obj.roles.client.today" class="md-primary md-hue-2 col-sm-1 no-right-padding">FOK</md-checkbox>
    <md-checkbox ng-model="obj.roles.client.today" class="md-primary md-hue-2 col-sm-1">AON</md-checkbox>
    <md-checkbox ng-model="obj.roles.client.today" class="md-primary md-hue-2 col-sm-1">GFS</md-checkbox>
    <md-checkbox ng-model="obj.roles.client.today" class="md-primary md-hue-2 col-sm-1">GTC</md-checkbox>
    <md-checkbox ng-model="obj.roles.client.today" class="md-primary md-hue-2 col-sm-1">GTD</md-checkbox>
    <md-checkbox ng-model="obj.roles.client.today" class="margin-left md-primary md-hue-2 col-sm-2">MF</md-checkbox>
</div>

<label>ORDER TYPE - TOMMORROW</label>
<div class="col-sm-12">
    <md-checkbox ng-model="obj.roles.order.tommorrow" class="md-primary md-hue-2 col-sm-1">Regular</md-checkbox>
    <md-checkbox ng-model="obj.roles.order.tommorrow" class="margin-left md-primary md-hue-2 col-sm-2">Special Terms</md-checkbox>
    <md-checkbox ng-model="obj.roles.order.tommorrow" class="md-primary md-hue-2 col-sm-1 no-right-padding">Stop</md-checkbox>
    <md-checkbox ng-model="obj.roles.order.tommorrow" class="md-primary md-hue-2 col-sm-1">Odd</md-checkbox>
    <md-checkbox ng-model="obj.roles.order.tommorrow" class="md-primary md-hue-2 col-sm-1">Limit</md-checkbox>
    <md-checkbox ng-model="obj.roles.order.tommorrow" class="md-primary md-hue-2 col-sm-1">Auction</md-checkbox>
    <md-checkbox ng-model="obj.roles.order.tommorrow" class="md-primary md-hue-2 col-sm-1">Call</md-checkbox>
    <md-checkbox ng-model="obj.roles.order.tommorrow" class="margin-left md-primary md-hue-2 col-sm-2">Modification</md-checkbox>
    <md-checkbox ng-model="obj.roles.order.tommorrow" class="md-primary md-hue-2 col-sm-2">Others</md-checkbox>
</div>
<label>VALIDITY TYPE - TOMMORROW</label>
<div class="col-sm-12">
    <md-checkbox ng-model="obj.roles.validity.tommorrow" class="md-primary md-hue-2 col-sm-1">Pro</md-checkbox>
    <md-checkbox ng-model="obj.roles.validity.tommorrow" class="margin-left md-primary md-hue-2 col-sm-2">Client</md-checkbox>
    <md-checkbox ng-model="obj.roles.validity.tommorrow" class="md-primary md-hue-2 col-sm-1 no-right-padding">Participants</md-checkbox>
    <md-checkbox ng-model="obj.roles.validity.tommorrow" class="md-primary md-hue-2 col-sm-1">WHS</md-checkbox>
    <md-checkbox ng-model="obj.roles.validity.tommorrow" class="md-primary md-hue-2 col-sm-1">Buyback</md-checkbox>
    <md-checkbox ng-model="obj.roles.validity.tommorrow" class="md-primary md-hue-2 col-sm-1">Auction</md-checkbox>
    <md-checkbox ng-model="obj.roles.validity.tommorrow" class="md-primary md-hue-2 col-sm-1">Call</md-checkbox>
    <md-checkbox ng-model="obj.roles.validity.tommorrow" class="margin-left md-primary md-hue-2 col-sm-2">SPLCLI</md-checkbox>
</div>
<label>CLIENT TYPE - TOMMORROW</label>
<div class="col-sm-12">
    <md-checkbox ng-model="obj.roles.client.tommorrow" class="md-primary md-hue-2 col-sm-1">Day</md-checkbox>
    <md-checkbox ng-model="obj.roles.client.tommorrow" class="margin-left md-primary md-hue-2 col-sm-2">IOC</md-checkbox>
    <md-checkbox ng-model="obj.roles.client.tommorrow" class="md-primary md-hue-2 col-sm-1 no-right-padding">FOK</md-checkbox>
    <md-checkbox ng-model="obj.roles.client.tommorrow" class="md-primary md-hue-2 col-sm-1">AON</md-checkbox>
    <md-checkbox ng-model="obj.roles.client.tommorrow" class="md-primary md-hue-2 col-sm-1">GFS</md-checkbox>
    <md-checkbox ng-model="obj.roles.client.tommorrow" class="md-primary md-hue-2 col-sm-1">GTC</md-checkbox>
    <md-checkbox ng-model="obj.roles.client.tommorrow" class="md-primary md-hue-2 col-sm-1">GTD</md-checkbox>
    <md-checkbox ng-model="obj.roles.client.tommorrow" class="margin-left md-primary md-hue-2 col-sm-2">MF</md-checkbox>
</div>

在我的指令代码中: - 我预定了数组: -

 scope.obj.roles = {
    "order" : {
        "today" : [],
        "tommorrow" : []
    },
    "validity" : {
        "today" : [],
        "tommorrow" : []
    },
    "client" : {
        "today" : [],
        "tommorrow" : []
    }
};

每个复选框等于一个数字。我想在上面的数组中推送相关的数字(预定义的)并将其存储在我的后端: -

1 - Regular, 2 - Special Terms, 3 - Stop, 4 - Odd, 5 - Limit, 6 - Auction, 7 - Call, 8 - Modification, 9 - Others
1 - Pro, 2 - Client, 3 - Participants, 4 - WHS, 5 - Buyback, 6 - SPLCLI
1 - Day, 2 - IOC, 3 - FOK, 4 - AONIOC, 5 - GFS, 6 - GTC, 7 - GTD, 8 - MF

我应该如何实现这一目标?因此,每当我检查任何复选框时,只有在未选中时才会将数据库中的复选框编号推入,应该弹出它。如果没有检查,则不应该推送任何东西。

1 个答案:

答案 0 :(得分:0)

We need a checked property for each array object, So I gave a sample 
for your requirements.
<div ng-controller="MyCtrl">
<input type="checkbox" ng-model="current[0].checked" ng-
   checked="current[0].checked" />
<input type="checkbox" ng-model="current[1].checked" ng-
      checked="current[1].checked" />
<input type="checkbox" ng-model="current[2].checked" ng-
       checked="current[2].checked" />
   <button ng-click="save()">Click</button>
</div>

Angular Code:

var myApp = angular.module('myApp',[]);
myApp.controller("MyCtrl", MyCtrl);
function MyCtrl($scope, $filte) {
    $scope.current = [{name: "Regular", status: false},
                      {name: "Shop", status: false},
                      {name: "Odd", status: false}];
    $scope.save = function() {
      var selectedArray = 
          $filter('filter')($scope.current,                                 
          function(val, key) {                      
            if(val.checked==true){        
                return val;
            }
          }, true);          
          console.log(selectedArray)
        }
     }