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=".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>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./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>- 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. – Navoneel Talukdar Commented Dec 22, 2015 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 isselectedvaluehere also declared 2 times. – Navoneel Talukdar Commented Dec 22, 2015 at 4:18 - @komal : Please explain it more. – Monty Khanna Commented Dec 22, 2015 at 6:01
3 Answers
Reset to default 9 +25Your code can be made to work by solving a couple of problems:
You are using both
ng-modelandng-selectedon the checkbox inputs. As per the Angular specification, these should not be used together as they can cause unexpected behaviour.You are using
ng-clickto 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./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>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;
}
}]);
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./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis./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 pleted the code.
Get back to me if you were asking for something else