Jak przesłać wybrane wartości na liście checkbox używając angularjs

Question

Mam listę checkbox, w której chcę nacisnąć wybrane/sprawdzone wartości. Jeśli wepchnę tę wartość do listy wyboru, powinno to być zaznaczone. Na przykład tutaj pchnąłem Samsung Galaxy S6. Jeśli postawię Samsunga Galaxy S6, musimy sprawdzić dane ofertowe, ponieważ Samsung Galaxy S6 ma jakąś ofertę. Tak więc, jeśli zaznaczone jest pole wyboru Samsung Galaxy S6, należy wypełnić wiadomość o ofercie. Oto demo. Próbowałem mojego poziomu, ale nie mogę w stanie rozwiązać, proszę, pomóż mi.

function Test1Controller($scope) {  
 
      var serverData = ["Samsung Galaxy Note", "Samsung Galaxy S6", "Samsung Galaxy Avant","Samsung Galaxy Young"]; 
 
      $scope.items= [] ; 
 
    \t //var selectedvalue = window.localStorage.getItem("selectedvalue"); 
 
    \t // 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 
 
      }; 
 
    \t if (selectedvalue.indexOf(serverData[i]) >= 0 || null) 
 
    \t { 
 
       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]); 
 
       } 
 
      } 
 
      } 
 
     } 
 
\t \t console.log($scope.offers); \t \t 
 
    }; 
 
\t //--------------------------------------------------------------------------------------- 
 
    $scope.check = function() \t 
 
    { 
 
     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

Twój kod można pracować rozwiązując kilka problemów:

1. Używasz zarówno ng-model i ng-selected na wejściach wyboru. Zgodnie z Angular specification, nie powinny być używane razem, ponieważ mogą powodować nieoczekiwane zachowanie.

2. Używasz ng-click, aby zaktualizować, które oferty są dostępne. Zamiast tego możesz podać funkcję, która filtruje listę ofert na podstawie wybranych elementów. Będzie to oznaczać, że gdy (i jakkolwiek) elementy zostaną wybrane lub odznaczone, lista ofert zostanie zaktualizowana.

mam okrojone swoje demo i zawiera stałą wersję poniżej:

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

Można to osiągnąć za pomocą dyrektywy NG-opcje na wybierz i filtr z funkcją predicate.

funkcja (wartość, indeks): Funkcja predykatu może być używana do zapisu dowolnych filtrów. Funkcja jest wywoływana dla każdego elementu tablicy. Końcowym wynikiem jest tablica elementów, do których predykat powrócił.

można zobaczyć przykład roboczy here

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>

Zgodnie z tym, co rozumiem, twój problem jest, ukończyłem kod.

Wracaj do mnie, jeśli proszą o coś innego