如何在使用angularjs提交后获取复选框值?

时间:2015-12-12 06:04:58

标签: javascript jquery angularjs checkbox

当我提交必须获取复选框值时,我有一些复选框和一些优惠。我已经尝试但它不起作用我已经在下面添加了我的代码。现在我得到了提供消息ID但我在提交后得到了复选框值请帮助我。 demo



function Test1Controller($scope) {
    var storeid = window.localStorage.getItem("storeid");
    var serverData = ["Samsung Galaxy Note", "Samsung Galaxy S6", "Samsung Galaxy Avant","Samsung Galaxy Young"];
    $scope.items= [] ;
    $scope.selection = [];    
    $scope.offers = [{
        id: "as23456",
        Store: "samsung",
        Offer_message:"1500rs off",
        modalname: "Samsung Galaxy Young"       

    },{
        id: "de34575",
        Store: "samsung",
        Offer_message:"20% Flat on Samsung Galaxy S6",
        modalname: "Samsung Galaxy S6"       
    },]
    
    $scope.toggleSelection = function toggleSelection(item) {
        $scope.gotOffers=[];
        var idx = $scope.selection.indexOf(item);

        // is currently selected
        if (idx > -1) {
            $scope.selection.splice(idx, 1);
        }

        // is newly selected
        else {
            $scope.selection.push(item);
        }

        for(var i=0;i<$scope.selection.length;i++){
            for(var j=0;j<$scope.offers.length;j++){
                console.log($scope.selection[i].name  +"   "+ $scope.offers[j].modalname)
                if( $scope.selection[i].name == $scope.offers[j].modalname){
                    var idx = $scope.gotOffers.indexOf($scope.offers[j].Offer_message);
                    if(idx == -1){
                        console.log("inside idx")
                        $scope.gotOffers.push($scope.offers[j]);
                    }
                }
            }
        }
		console.log($scope.offers);
    };
    
	var selectedvalue = window.localStorage.getItem("selectedvalue");
	// here selected value Samsung Galaxy S6
    var selectedvalue="Samsung Galaxy S6,Samsung Galaxy Young";
    for(var i=0;i<serverData.length;i++){
        var modal = {
            name:serverData[i],
            selected:false
        };  
		if (selectedvalue.indexOf(serverData[i]) >= 0 || null){
            $scope.toggleSelection(modal);
        }
        $scope.items.push(modal);        
    }
    //----------------------------Our Shop Offers----------------------------------------
    $scope.check = function(){
        var checkedItems = [];
        console.log($scope.offerSelected)
        for(var i=0;i<$scope.items.length;i++){
            if($scope.items[i].selected){
                checkedItems.push($scope.items[i].name);
            }
        }
        console.log(checkedItems) ; 
    }
}	
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>
<div ng-app>
    <div ng-controller="Test1Controller" >
        <div ng-repeat="item in items">
            <input type="checkbox"  ng-checked="selection.indexOf(item) >= 0" ng-click="toggleSelection(item)"/> {{item.name}}
        </div>
        <select ng-show="gotOffers.length > 0" ng-model="offerSelected">
            <option ng-repeat="offer in gotOffers"  value="{{offer.id}}">{{offer.Offer_message}}</option>
        </select>
        <input type="button" name="submit" value="submit" ng-click="check()"/>
    </div>
</div>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

您似乎希望迭代$scope.selection而不是$scope.items

Updated Example

变化:

var checkedItems = [];$scope.selection
for (var i = 0; i < $scope.items.length; i++) {
  if ($scope.items[i].selected) {
    checkedItems.push($scope.items[i].name);
  }
}

为:

var checkedItems = [];
for (var i = 0; i < $scope.selection.length; i++) {
  checkedItems.push($scope.selection[i].name);
}

由于if中的所有元素都已经过检查,因此删除了$scope.selection条件语句。

或者,您也可以使用.map()方法创建数组:

Updated Example

var checkedItems = $scope.selection.map(function(checkbox) {
  return checkbox.name;
});