如何使用angularjs在復選框列表中推送選定的值

Question

我有復選框列表，我想推選所選/已檢查的值。如果我將該值推入復選框列表，則應檢查。例如，我推三星Galaxy S6。如果我放三星Galaxy S6，我們需要檢查報價數據因為三星Galaxy S6有一些報價。所以如果三星Galaxy S6被檢查下拉應該填寫提供消息。這是一個演示 。我已經嘗試了我的水平，但我無法解決請有人幫助我。

 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

您可以通過解決幾個問題使您的代碼工作：

1. 您在復選框輸入上使用ng-model和ng-selected 。 根據Angular規范 ，這些不應該一起使用，因為它們可能會導致意外行為。

2. 您正在使用ng-click更新可用的優惠。 相反，您可以提供一個功能，根據選擇的項目篩選商品列表。 這意味着無論何時選擇或取消選擇項目，都會更新商品列表。

我已經整理了你的演示，並在下面包含了一個固定版本：

 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

您可以通過在select上使用ng-options指令和使用謂詞函數的過濾器來實現此目的。

function（value，index）：謂詞函數可用於寫入任意過濾器。 為數組的每個元素調用該函數。 最終結果是謂詞返回true的那些元素的數組。

您可以在此處查看工作示例

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>

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> 

根據我的理解你的問題是，我已經完成了代碼。

如果你要求其他東西，請回復我