如何使用angularjs在复选框列表中推送选定的值

Question

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> 

Answer 1

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> 

Answer 2

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

Answer 3

 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