current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Sign up ×
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other. Join them; it only takes a minute:
up vote 0 down vote favorite

Below i have added my code here i want to get if i press submit button how to get checked check box values and selected drop down value.here checked check box values i am getting but if i select some offer in drop down .for example i checked Samsung Galaxy S6 and we have one offer for Samsung Galaxy S6 i have selected 20% Flat on Samsung Galaxy S6 in drop down.when i submit the submit button i need checked check box values and selected offer(20% Flat on Samsung Galaxy S6) id .pls some one help me out 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>

share|improve this question
up vote 0 down vote

You are missing ng-model on select, hence you were not able to use it. Also I have updated your code to fit ng-options instead of ng-repeat on option.

JSFiddle

Code

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

share|improve this answer
    
pls check this fiddle jsfiddle.net/0heruyep/7 – komal Dec 11 at 7:29
    
Can user select more than one offer? If I select S6 and Young, I get only one select. – Rajesh Dec 11 at 7:50
    
if user select Samsung Galaxy S6,Samsung Galaxy Young .in drop down user will get two offers but user can select only one in dropdown – komal Dec 11 at 7:51
    
Then you do not need an array. A simple variable to override value should be enough and if unchecked, reset the value, but unlike my code above, store entire object and compare modalname to reset and it should do the trick. – Rajesh Dec 11 at 7:57
    
can you pls update fiddle – komal Dec 11 at 8:25

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.