Question

我的期望当我取消选中Samsung Galaxy S6复选框时，它不应该显示下拉列表和。当我提交该按钮下拉列表不应该传递该id值 becoze没有选择

现在，当我取消选中三星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中的值不在数组中，则提供的角度将不会清除它。它会保留它，但不要在select中突出显示该元素，因为它不存在。

编辑：作为附注，如果您使用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。

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

1 个答案:

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

1 个答案:

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