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 checkbox list in that I want to push selected/checked values.If I push that value into checkbox list it should be checked.For example here I pushed Samsung Galaxy S6.If I put Samsung Galaxy S6 we need to check with offer data because Samsung Galaxy S6 have some offer.So if Samsung Galaxy S6 is checked dropdown should populate with offer message.Here is a demo.I have tried my level but I can't able to solve please someone help me out.

function Test1Controller($scope) {      
            var serverData = ["Samsung Galaxy Note", "Samsung Galaxy S6", "Samsung Galaxy Avant","Samsung Galaxy Young"];
            $scope.items= [] ;
    	//var selectedvalue = window.localStorage.getItem("selectedvalue");
    	// here selected value Samsung Galaxy S6
            var selectedvalue="Samsung Galaxy S6";
        for(var i=0;i<serverData.length;i++)
        {
            var modal = {
            name:serverData[i],
            selected:false
            };  
    	if (selectedvalue.indexOf(serverData[i]) >= 0 || null)
    	{
                modal.selected = true;

            }
         $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.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]);
              }
            }
          }
        }
		console.log($scope.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) ; 
     }
}
<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" 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>

share|improve this question

This question has an open bounty worth +50 reputation from komal ending in 1 hour.

Looking for an answer drawing from credible and/or official sources.

    
Can you pls clarify what problem exactly you are having?I can see in fiddle that when you select any item(here samsung galaxy s6),dropdown shows up with offer message. – Programmmer Dec 22 at 4:13
    
also why this code if (selectedvalue.indexOf(serverData[i]) >= 0 || null) { modal.selected = true; } is required.Without this also it is working.I don't understand what is selectedvalue here also declared 2 times. – Programmmer Dec 22 at 4:18
    
@komal : Please explain it more. – Monty Dec 22 at 6:01

Your code can be made to work by solving a couple of problems:

  1. You are using both ng-model and ng-selected on the checkbox inputs. As per the Angular specification, these should not be used together as they can cause unexpected behaviour.

  2. You are using ng-click to update which offers are available. Instead, you can provide a function which filters down the list of offers based on which items are selected. This will mean that whenever (and however) items are selected or deselected, the list of offers will update.

I've trimmed down your demo and included a fixed version below:

function Test1Controller($scope) {
  $scope.items = [{"name": "Samsung Galaxy Note", "selected": false}, {"name": "Samsung Galaxy S6", "selected": true}, {"name": "Samsung Galaxy Avant", "selected": false}, {"name": "Samsung Galaxy Young","selected": false}];

  $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"
  }, ];

  var selectedItems = function() {
    return $scope.items.filter(function(item) {
      return item.selected;
    });
  };

  $scope.availableOffers = function() {
    var items = selectedItems();
    return $scope.offers.filter(function(offer) {
      return items.some(function(item) {
        return item.name === offer.modalname;
      });
    });
  };
}
<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-click="toggleSelection(item)"/> {{item.name}}
</div>
<select ng-show="availableOffers().length > 0" ng-model="offerSelected">
  <option ng-repeat="offer in availableOffers()"  value="{{offer.id}}">{{offer.Offer_message}}</option>
</select>

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

share|improve this answer
    
nothing is working.when i load page i want show some checkbox is checked.for example Samsung Galaxy S6 is checked means dropdown should show bcoz Samsung Galaxy S6 have some offers – komal Dec 22 at 5:44
    
Sorry about that - I had copied the wrong HTML snippet when posting the answer. The code should be working now. – cmrn Dec 22 at 5:55
    
thanks i have added working full code .thanks for your response – komal Dec 22 at 6:20

You can achieve this by using the ng-options directive on the select and a filter with a predicate function.

function(value, index): A predicate function can be used to write arbitrary filters. The function is called for each element of array. The final result is an array of those elements that the predicate returned true for.

You can view a working example here

The HTML

<div ng-controller="OfferController">
    <div ng-repeat="item in items">
        <input type="checkbox" ng-model="item.selected" /> {{item.name}}
    </div>
    <select ng-show="hasResults" data-ng-options="offer.id as offer.Offer_message for offer in offers | filter : onGetFilter" ng-model="offerSelected"></select>
    <input type="button" name="submit" value="submit" ng-click="check()" />
    <br/>
    <label>Selected Offer {{offerSelected}}</label>
</div>

The javascript

myApp.controller('OfferController', ['$scope', function ($scope) {
    var self = this;

    var serverData = ["Samsung Galaxy Note", "Samsung Galaxy S6", "Samsung Galaxy Avant", "Samsung Galaxy Young"];

    $scope.items = [];

    var selectedvalue = "Samsung Galaxy S6";

    for (var i = 0; i < serverData.length; i++) {
        var modal = {
            name: serverData[i],
            selected: false
        };
        if (selectedvalue.indexOf(serverData[i]) >= 0 || null) {
            modal.selected = true;
        }
        $scope.items.push(modal);
    }

    $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.hasResults = false;

    $scope.onGetFilter = function (value, index) {
        if (index == 0 && $scope.hasResults) {
            $scope.hasResults = false;
        }
        for (var i = 0; i < $scope.items.length; i++) {
            if ($scope.items[i].selected) {
                if ($scope.items[i].name.indexOf(value.modalname) !== -1) {
                    $scope.hasResults = true;
                    return true;
                }
            }
        }
        return false;
    };

    function getSelectedItems() {
        var selectedItems = [];
        for (var i = 0; i < $scope.items.length; i++) {
            if ($scope.items[i].selected) {
                selectedItems.push($scope.items[i]);
            }
        }
        return selectedItems;
    }
}]);
share|improve this answer
    
how can i get checked checkbox values and selected offer id – komal Dec 22 at 7:45
    
please see updated answer with getSelectedItems function that returns the checked items. You can retrieve the selected offer id by accessing the $scope.offerSelected property in the controller – Tjaart van der Walt Dec 22 at 8:04

function Test1Controller($scope) {

  var serverData = 
  [
    "Samsung Galaxy Note",
    "Samsung Galaxy S6",
    "Samsung Galaxy Avant",
    "Samsung Galaxy Young"
  ];
  $scope.items = [];
  //var selectedvalue = window.localStorage.getItem("selectedvalue");
  // here selected value Samsung Galaxy S6
  var selectedvalue = "Samsung Galaxy S6";
  for (var i = 0; i < serverData.length; i++) {
    var modal = {
      name: serverData[i],
      selected: selectedvalue.indexOf(serverData[i]) >= 0
    };
    $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.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]);
          }
        }
      }

    }
    console.log($scope.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);
  }



}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.20/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" ng-model="offerSelected">
      <option value="">Select offer</option>
      <option ng-repeat="offer in gotOffers" ng-value="offer.id">{{offer.Offer_message}}</option>
    </select>

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

As per what i understand your problem is, I have completed the code.

Get back to me if you were asking for something else

share|improve this answer

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.