当我没有选择时，角度​​下拉传递值？

Question

My demo

我的期望是当我取消选中三星 Galaxy S6 复选框时它不应该显示下拉菜单，并且当我提交该按钮下拉菜单时不应该传递该 id 值 因为没有选择任何东西

现在，当我取消选中三星 Galaxy S6 复选框时，下拉菜单未显示，但在我在下拉菜单中选择某些值之前，当我提交时，我得到的是旧的选择值。

我有一个复选框列表，并根据复选框值选择下拉列表

当我检查复选框选中复选框值时，它检查此 $scope.offer 对象检查模型名称是否存在。如果$scope.offer对象下拉列表中是否存在已检查的型号名称，则会显示报价消息。

如果没有特定复选框值的报价，则不会出现下拉菜单。但是这里的问题是，当我取消选中特定复选框（具有报价）并提交该页面时，报价消息下拉仍然传递值。

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 = [];
  $scope.selection = [];

  $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.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);

  };

  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) {
      $scope.toggleSelection(modal);

    }
    $scope.items.push(modal);
  }
  //----------------------------Our Shop Offers----------------------------------------

  //-----------------------------------------------------------------------------------



  //---------------------------------------------------------------------------------------
  $scope.check = function()

  {

    console.log($scope.offerSelected);
      var checkedItems = [];
      for (var i = 0; i < $scope.selection.length; i++) {
        checkedItems.push($scope.selection[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-checked="selection.indexOf(item) >= 0" 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

这样做是因为您在隐藏选择时没有清除offerSelected。

ng-show 只是隐藏了元素，它设置了display: none !important; 的样式，但不修改与元素相关的任何绑定。如果你想用相同的数据和选择显示选择会发生什么？

当您清空 toggleSelection 中创建选择的数组时，您还应该清空 ng-model。如果ng-model 中的值不在您提供的数组中，角度将不会清除它。它会保留它，但不会在选择中突出显示该元素，因为它不存在。

---

编辑：附带说明一下，如果您使用 ng-options 实现您的选择，您会发现它会容易得多

---

再次编辑：根据 OP 的要求，我更新了小提琴：http://jsfiddle.net/yb2717v2/2/

这是核心位。看到您可以选择多个复选框，当用户选择另一个选项触发您的 toggleSelection 方法时，用户选择的元素仍可能出现在列表中。所以你不能盲目地清空offerSelected。如果它不是可用的选择，您只能清空它。 （除非您希望每次单击复选框时都将其清空。）它实现了array.some 检查文档以确保您需要的浏览器支持它。

/*
  array.some() will itterate over every element in the array callings its callback FN.
  If any FN returns true it will imedietly exit and return true. So you can use it 
  to check if the element exists in the array.
*/
var ElementExists = $scope.gotOffers.some(function (offer) {
    return ($scope.offerSelected && offer.id === $scope.offerSelected);
});

//If it doesn't exist clear the model
if (!ElementExists) {
    $scope.offerSelected = undefined;
}

我还在小提琴中实现了ng-options。