如何使用角度使基於選擇下拉列表的復選框值？

Question

我有三星移動型號的復選框列表。
我也有兩個提議

$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"       

    },
    ]

在這里，如果用戶檢查了Samsung Galaxy S6，我們需要使用要約數據檢查是否有針對Samsung Galaxy S6的要約。

如果我們有報價，請選擇下拉菜單，並附帶報價信息

<select >
  <option value="0">Please Select Offer</option>
      <option value="Samsung Galaxy S6">20% Flat on Samsung Galaxy S6</option>
</select>

如果用戶檢查了Samsung Galaxy Young，我們需要檢查報價數據是否有針對Samsung Galaxy Young的報價。
如果我們有報價，請選擇下拉菜單，並附帶報價信息

<select >
  <option value="0">Please Select Offer</option>
      <option value="Samsung Galaxy Young">1500rs off</option>
</select>

如果用戶同時選中了Samsung Galaxy Young和Samsung Galaxy S6，我們需要使用要約數據檢查是否有針對Samsung Galaxy Young，Samsung Galaxy S6的要約。

如果我們有報價，請選擇下拉菜單，並附帶報價信息

<select >
  <option value="0">Please Select Offer</option>
      <option value="Samsung Galaxy Young">1500rs off</option>
       <option value="Samsung Galaxy S6">20% Flat on Samsung Galaxy S6</option>
</select>

如果用戶未選擇這兩個選項（三星Galaxy Young，三星Galaxy S6），則不會出現下拉菜單，因為我們沒有其他型號的報價。

這是我的演示

Answer 1

如下更新檢查方法：

 $scope.check = function()
 {
     var checkedItems = [];
     for(var i=0;i<$scope.items.length;i++)
     {
        if($scope.items[i].selected == true){
           checkedItems.push($scope.items[i].name);
        }
     }

     $scope.validOffers = [];
     for (var i=0; i<checkedItems.length; i++) {
        var checkedModel = checkedItems[i];
        for (var j=0; j<$scope.offers.length; j++) {
           if ($scope.offers[j].modalname == checkedModel) {
              $scope.validOffers.push($scope.offers[j]);
           }
        }
     }        
}

然后，在HTML中，您將需要：

<div>
   <select ng-if="validOffers.length > 0">
      <option value="0">Please Select Offer</option>
     <option ng-repeat="offer in validOffers" value="offer.modalname"{{offer.Offer_message}}   
     </option>
   </select>
</div>

http://jsfiddle.net/0heruyep/3/

Answer 2

<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">
      <option ng-repeat="offer in gotOffers">{{offer}}</option>
    </select>

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



function Test1Controller($scope) {
  var storeid = window.localStorage.getItem("storeid");
    var serverData = ["Samsung Galaxy Note", "Samsung Galaxy S6", "Samsung Galaxy Avant","Samsung Galaxy Young"];
    $scope.items= [] ;

    for(var i=0;i<serverData.length;i++)
    {
        var modal = {
        name:serverData[i],
        selected:false
        };        
        $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.check = function()
     {
         var checkedItems = [];
            for(var i=0;i<$scope.items.length;i++)
            {
                  if($scope.items[i].selected){
                      checkedItems.push($scope.items[i].name);
                    }
            }
              console.log(checkedItems) ; 
     }
$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].Offer_message);
              }

            }
          }

        }
    };


}

希望這可以幫助