Question

请检查我的代码段。我正在使用自定义选择框。并尝试重置其他选择框选择。要改变有错误。请帮助我错在哪里以及正确的方法。提前谢谢。

＆＃13;

$(document).on("click focus", ".sbSelector, .sbToggle", function() {
  $(this).closest(".sbHolder").prev("select").trigger("click");
});
var app = angular.module('app', []);
app.controller('appController', ['$scope', function($scope) {
  $scope.allTheme = [{
    "theme_id": 2,
    "productData": [{
      "store_id": 1,
      "product_id": 3,
      "style_id": 1,
      "size_id": 3,
      "theme_id": 2,
      "name": "Boy - FD",
    }, {
      "store_id": 1,
      "product_id": 4,
      "style_id": 1,
      "size_id": 3,
      "theme_id": 2,
      "name": "Boy - FE"
    }, {
      "store_id": 1,
      "product_id": 8,
      "style_id": 1,
      "size_id": 3,
      "theme_id": 2,
      "name": "Boy - QS",
    }]
  }, {
    "theme_id": 5,
    "productData": [{
      "store_id": 1,
      "product_id": 99,
      "style_id": 1,
      "size_id": 3,
      "theme_id": 5,
      "name": "Blank - FD"
    }, {
      "store_id": 1,
      "product_id": 100,
      "style_id": 1,
      "size_id": 3,
      "theme_id": 5,
      "name": "Blank - FE"
    }, {
      "store_id": 1,
      "product_id": 101,
      "style_id": 1,
      "size_id": 3,
      "theme_id": 5,
      "name": "Blank - QS"
    }]
  }, {
    "theme_id": 7,
    "productData": [{
      "store_id": 1,
      "product_id": 129,
      "style_id": 1,
      "size_id": 3,
      "theme_id": 7,
      "name": "Nautical"
    }]
  }, {
    "theme_id": 10,
    "productData": [{
      "store_id": 1,
      "product_id": 12,
      "style_id": 1,
      "size_id": 3,
      "theme_id": 10,
      "name": "Girl - FD"
    }, {
      "store_id": 1,
      "product_id": 13,
      "style_id": 1,
      "size_id": 3,
      "theme_id": 10,
      "name": "Girl - FE"
    }, {
      "store_id": 1,
      "product_id": 17,
      "style_id": 1,
      "size_id": 3,
      "theme_id": 10,
      "name": "Girl - QS"
    }]
  }];

  $scope.targetField = null;
  $scope.selectBoxClick = function($event) {
    if ($event.target === null) {
      return;
    }
    $scope.targetField = $event.target;
  }

  $scope.changeTheme = function(theme, selectedProducts) {
    $scope.activeTheme = theme;
    if (selectedProducts) {
      $scope.isSizedAndThemeSelected = true;
      $($scope.targetField).closest(".owl-item").siblings().each(function() {
        if ($(this).find("select").length) {
          var option = $(this).find("select option").eq(0);
          $(this).find("select").selectbox("change", option.attr('value'), option.html());
        }
      })



    } else {
      $scope.isSizedAndThemeSelected = false;
      $scope.activeTheme = {};
    }
  }

}]);
app.directive('customSelect', ['$timeout', function($timeout) {
  return {
    restrict: 'C',
    transclude: false,
    link: function(scope, element) {
      scope.initSelectbox = function(element) {
        $timeout(function() {
          element.selectbox();
        }, 0)
      }
    }
  };
}]).directive('customSelectItem', [function() {
  return {
    restrict: 'A',
    transclude: false,
    link: function(scope, element) {
      if (scope.$last) {
        scope.initSelectbox(element.parent());
      }
    }
  };
}]);

＆＃13;

.sbHolder {
  font-size: 14px;
  position: relative;
  height: 50px;
}

.sbSelector>a {
  color: #fff;
  text-decoration: none;
  display: block;
}

.sbSelector {
  display: block;
  height: 31px;
  left: 0;
  line-height: 19px;
  overflow: hidden;
  position: absolute;
  text-indent: -22px;
  top: 0;
  width: 100%;
  cursor: pointer;
  color: #fff;
  background: #fdb400;
  display: inline-table;
  text-indent: 0;
  cursor: pointer;
}

.sbToggle {
  display: block;
  height: 30px;
  outline: none;
  position: absolute;
  right: 0;
  top: 2px;
  width: 30px;
  background-size: 16px;
  z-index: 9;
  cursor: pointer;
}

.sbOptions {
  background: #fff;
  border: solid 1px #dfdfdf;
  list-style: none;
  left: 0;
  margin: 0;
  padding: 4px 14px 10px 12px;
  position: absolute;
  width: 100%;
  z-index: 1;
  overflow-y: auto;
  top: auto;
  text-align: left;
}

.sbOptions li {
  padding: 0px 0px;
}

.sbOptions li img {
  display: inline-block;
  float: left;
  padding-top: 7px;
  padding-left: 3px;
}

.sbOptions a {
  border-bottom: solid 1px #e9e9e9;
  display: block;
  outline: none;
  padding: 7px 0 1px 0;
  color: #545454;
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 400;
}

.sbOptions a:link,
.sbOptions a:visited {
  color: #696969;
  font-size: 12px;
  background: #fff;
  text-decoration: none;
  transition: all 0.2s ease-in-out;
  font-weight: 300;
  display: block;
  padding-left: 0;
}

.sbOptions a:hover,
.sbOptions a:focus,
.sbOptions a.sbFocus {
  color: #545454;
  font-weight: 600;
}

.sbOptions li.last a {
  border-bottom: none;
}

.sbOptions .sbDisabled {
  border-bottom: dotted 1px #515151;
  color: #999;
  display: block;
  padding: 7px 0 7px 3px;
}

.sbOptions .sbGroup {
  border-bottom: dotted 1px #515151;
  color: #EBB52D;
  display: block;
  font-weight: bold;
  padding: 7px 0 7px 3px;
}

.sbOptions .sbSub {
  padding-left: 17px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://project-progress.net/projects/kodak-express-local-angular/js/jquery.selectbox-0.2.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div data-ng-app="app">
  <div data-ng-controller="appController">
    <div data-ng-repeat="theme in allTheme" style="width:500px;" class="owl-item">
      <div class="select-box" data-ng-if="theme.productData.length > 1">
        <select class="customSelect" data-ng-model="theme.SelectedProduct" data-ng-click="selectBoxClick($event)" data-ng-change="changeTheme(theme, theme.SelectedProduct)">
                <option value="">Select an option</option>
                <option data-custom-select-item data-ng-repeat="product in theme.productData" data-ng-value="{{product}}">{{product.name}}</option>
            </select>
      </div>
    </div>
  </div>
</div>

＆＃13;

Answer 1

不要在开头使用$$的任何变量，因为它们被视为严格的内部和私有变量。

例如，如果需要从jQuery回调触发摘要循环，请使用以下模式：

scope.$applyAsync(function () {
    // the code updating any other scope stuff
});

给它一个回调函数的好处是，如果函数内部发生任何错误，它将为你提供完整的堆栈跟踪。

重置其他选择框时，$ apply已在进行中发生错误

1 个答案: