如何使用angularjs获取选中的复选框值和选定的下拉值?

时间:2015-12-11 06:12:54

标签: javascript jquery angularjs

下面我已经在这里添加了我的代码我想得到,如果我按提交按钮如何获取选中复选框值和选择下拉值。检查复选框值我得到但如果我选择一些报价下拉。例如,我检查了三星Galaxy S6,我们为三星Galaxy S6提供了一个优惠我在三星Galaxy S6上选择了20%Flat下拉。当我提交提交按钮时,我需要选中复选框值和所选优惠(20%持平)三星Galaxy S6)id .pls有人帮助我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= [] ;

    for(var i=0;i<serverData.length;i++)
    {
        var modal = {
        name:serverData[i],
        selected:false
        };        
        $scope.items.push(modal);        
    }
    //----------------------------Our Shop Offers----------------------------------------
    $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.check = function()
	 
     {
	 
	 
         var checkedItems = [];
            for(var i=0;i<$scope.items.length;i++)
            {
                  if($scope.items[i].selected){
                      checkedItems.push($scope.items[i].name);
                    }
            }
              console.log(checkedItems) ; 
     }
$scope.selection = [];

      $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].Offer_message);
              }

            }
          }

        }
		console.log($scope.offers);
		
    };


}
<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-model="item.selected"  ng-checked="selection.indexOf(item) > -1" ng-click="toggleSelection(item)"/> {{item.name}}
    </div>
    <select ng-show="gotOffers.length > 0" >
      <option ng-repeat="offer in gotOffers" ng-model="offer"  value="offer">{{offer}}</option>
    </select>

      <input type="button" name="submit" value="submit" ng-click="check()"/>
  </div>
</div>

1 个答案:

答案 0 :(得分:0)

您在选择时缺少ng-model,因此您无法使用它。此外,我已在选项上更新了您的代码以适合ng-options而不是ng-repeat

JSFiddle

代码

&#13;
&#13;
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.selectedOffer = [];

  for (var i = 0; i < serverData.length; i++) {
    var modal = {
      name: serverData[i],
      selected: false,
    };
    $scope.items.push(modal);
  }
  //----------------------------Our Shop Offers----------------------------------------
  $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.check = function() {
    var checkedItems = [];
    for (var i = 0; i < $scope.items.length; i++) {
      if ($scope.items[i].selected == true) {
        checkedItems.push({
          name: $scope.items[i].name,
          offer: $scope.selectedOffer.Offer_message
        });
      }
    }

    console.log(checkedItems)

    $scope.validOffers = [];

    for (var i = 0; i < checkedItems.length; i++) {
      var checkedModel = checkedItems[i];
      for (var j = 0; j < $scope.offers.length; j++) {
        if ($scope.offers[j].modalname == checkedModel.name) {
          $scope.validOffers.push($scope.offers[j]);
        }
      }
    }

    if ($scope.validOffers.length > 0) {
      $scope.validOffers.unshift({
        id: "0",
        Store: $scope.validOffers[0].Store,
        Offer_message: "Please Select Offer",
        modalname: $scope.validOffers[0].modalname,
      })
    }
  }
}
  
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>

<div ng-app>
  <div ng-controller="Test1Controller">
    <div ng-repeat="item in items">
      <input ng-click="check()" type="checkbox" ng-model="item.selected" /> {{item.name}}
    </div>
    <div>
      <select ng-show="validOffers.length > 0" ng-model="selectedOffer" ng-options="offer.Offer_message for offer in validOffers">
      </select>
    </div>
    <input type="button" name="submit" value="submit" ng-click="check()" />
  </div>
</div>
&#13;
&#13;
&#13;