0
數據-NG-變化不會設置selectedIndex屬性後工作
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>如果我選擇 - 從第一個選擇框中選擇「男孩FD」之後第二個選擇框的選項中，選擇「男孩餵食'兩者都可以起作用，但再次選擇第一個選擇框'Boy-FD'選項比功能不起作用。提前致謝。