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:

I have list of checkboxes with Samsung mobile models.
I also have two 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"       

    },
    ]

Here If user checked Samsung Galaxy S6 we need to check with offers data whether we have offers or not for Samsung Galaxy S6.

If we have offers select drop down should come with offer message

<select >
  <option value="0">Please Select Offer</option>
      <option value="Samsung Galaxy S6">20% Flat on Samsung Galaxy S6</option>
</select>

If user checked Samsung Galaxy Young, we need to check with offers data whether we have offers or not for Samsung Galaxy Young.
If we have offers select drop down should come with offer message

<select >
  <option value="0">Please Select Offer</option>
      <option value="Samsung Galaxy Young">1500rs off</option>
</select>

If user checked Samsung Galaxy Young, Samsung Galaxy S6 both, we need to check with offers data whether we have offers or not for Samsung Galaxy Young,Samsung Galaxy S6.

If we have offers select drop down should come with offer message

<select >
  <option value="0">Please Select Offer</option>
      <option value="Samsung Galaxy Young">1500rs off</option>
       <option value="Samsung Galaxy S6">20% Flat on Samsung Galaxy S6</option>
</select>

If user does not select these two (Samsung Galaxy Young,Samsung Galaxy S6) select drop down should not come bacause we dont have offers for other models.

Here is my demo

share|improve this question

Update your check method as follows:

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

     $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) {
              $scope.validOffers.push($scope.offers[j]);
           }
        }
     }        
}

Then in the HTML you will need:

<div>
   <select ng-if="validOffers.length > 0">
      <option value="0">Please Select Offer</option>
     <option ng-repeat="offer in validOffers" value="offer.modalname"{{offer.Offer_message}}   
     </option>
   </select>
</div>

http://jsfiddle.net/0heruyep/3/

share|improve this answer
    
nothing is working pls check the fiddle.pls update fiddle – komal Dec 6 at 8:39
    
while check and uncheck it should happen ,not after submit – komal Dec 6 at 8:41
    
not like this while checking check box like If user checked Samsung Galaxy S6 drop down should come befor that submit button it should show offer messages.only option value should add not multiple dropdowns – komal Dec 6 at 8:49
    
select list moved to before the submit button...I think that's it! – jtsnr Dec 6 at 8:55
    
dropdown should come after checkbox checked not after submit.and only one dropdown should come not multiple – komal Dec 6 at 8:55
<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">{{offer}}</option>
    </select>

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



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

            }
          }

        }
    };


}

Hope this helps

share|improve this answer
    
but if i unchcked it should not show that unchecked model offer – komal Dec 6 at 8:51
    
thanks its working – komal Dec 6 at 9:04
    
after submit how can i get selected offer id – komal Dec 6 at 9:24
    
On submit get dropdown values from scope variable. Then for each values got from dropdown check in your offers array for equality and return the corrosponding id when a match is found. Similar to the for loop in toggleSelection – Abhijeet Kumar Gaur Dec 6 at 9:50
    
i am not able to get offer drop down value pls help me out – komal Dec 11 at 6:10

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.