0

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

Improve this question

2 Answers 2

Reset to default
2

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/

Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

nothing is working pls check the fiddle.pls update fiddle
while check and uncheck it should happen ,not after submit
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
select list moved to before the submit button...I think that's it!
dropdown should come after checkbox checked not after submit.and only one dropdown should come not multiple
|
0 
<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

Improve this answer

4 Comments

but if i unchcked it should not show that unchecked model offer
after submit how can i get selected offer id
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
i am not able to get offer drop down value pls help me out

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.