javascript - 设置 selectedIndex 属性后 data-ng-change 不起作用

Question

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) {
                console.log("chagne Theme");
                if ($scope.targetField) {
                    $scope.activeTheme = theme;
                    if (selectedProducts) {
                        $scope.isSizedAndThemeSelected = true;
                        var targetSelect_ = $($scope.targetField);
                        $scope.targetField = null;
                        targetSelect_.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());
                                var select_ = $(this).find("select");
                                select_.val(option.attr('value'));
                                select_.prop('selectedIndex',0);
                                
                            }
                        })
                    } else {
                        $scope.isSizedAndThemeSelected = false;
                        $scope.activeTheme = {};
                    }
                }
            }

        }]);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.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>-->
        <select 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-ng-repeat="product in theme.productData" data-ng-value="{{product}}">{{product.name}}</option>
            </select>
      </div>
    </div>
  </div>
</div>

如果我从第一个选择框选项中选择“Boy - FD”，然后在第二个选择框选项中选择“boy-fed”，则两者都可以运行，但再次选择第一个选择框“Boy-FD”选项即可功能不起作用。提前致谢。

Answer 1

下拉菜单无法正常工作的原因是，当您直接更新 DOM 时，与“data-ng-model”链接的数据模型不会更新，因为您在 Angular 的摘要周期之外更新了下拉菜单。

这是我如何让你的下拉菜单与 Angular 一起使用，我希望这会有所帮助。

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.changeTheme = function(theme) {
    console.log("change Theme");
    $scope.activeTheme = theme;
    angular.forEach($scope.allTheme, function(item, index) {
      if (item.SelectedProduct != theme.SelectedProduct) {
        item.SelectedProduct = "";
      }
    });
    console.log(theme.SelectedProduct);

  }

}]);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.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 data-ng-model="theme.SelectedProduct" data-ng-change="changeTheme(theme)">
                <option value="">Select an option</option>
                <option data-ng-repeat="product in theme.productData" data-ng-value="{{product}}">{{product.name}}</option>
            </select>
      </div>
    </div>
  </div>
</div>