我有一些汽车和可用年限：
注意： 2008年重复。这很重要）
默认情况下，我为沃尔沃设定了2006年（除了2008年之外的任何一年）
单击“加载汽车1”，然后“加载汽车2”
你还可以看到2006。它有效。
但是从2006年到2008年有所改变
单击“加载汽车1”，然后“加载汽车2”
2008年输了。它不起作用。
为什么呢？我不明白什么？ SELECT标签（数字或字符串）的值类型无关紧要
如果我删除
//I use length = 0 in ng-disabled to user can't change 'year' while timeout interval
if (main.years) main.years.length = 0;
或$ timeout它会起作用。
我试着用bind。它不起作用。
感谢。
我做了一个简单的例子。但在我的项目中，我有很多字段和慢客户端服务器。 如果我选择汽车非常快，汽车阵列中的数据和选择中的选项将丢失
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($timeout) {
var main = this;
main.selectCar = selectCar;
main.models = ["Volvo", "VW", "Audi", "Ford", "Honda", "Jaguar"];
//main.years = [2006, 2007, 2008, 2009, 2010, 2011];
main.cars = [{
year: 2006,
model: "Volvo"
}, {
year: 2011,
model: "Honda"
}];
selectCar(main.cars[0]);
// bind doesn't work too
function selectCar(car) {
// I use length = 0 in ng-disabled to user can't change 'year' while timeout interval
if (main.years) main.years.length = 0; //will work without this line
main.activeCar = car;
getDataFromServer('years');
console.log(main.cars[0].year);
}
function getDataFromServer(nameForOptions) {
// don't think about this logic
// $q
$timeout(function() { //will work without $timeout
var arr;
if (nameForOptions === 'years') {
if (["Volvo", "VW", "Audi"].indexOf(main.activeCar.model) > -1) {
arr = [2006, 2007, 2008];
} else {
arr = [2008, 2009, 2010, 2011];
};
}
main[nameForOptions] = arr;
}, 100);
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<body ng-app="plunker" ng-controller="MainCtrl as main">
<br /><br />
<button ng-click="main.selectCar(main.cars[0])">Load car 1</button>
<button ng-click="main.selectCar(main.cars[1])">Load car 2</button>
<br /><br />
<select id="select_1" ng-model="main.activeCar.model" ng-options="model for model in main.models" ng-disabled="!main.models.length"></select>
<select id="select_2" ng-model="main.activeCar.year" ng-options="year for year in main.years" ng-disabled="!main.years.length"></select>
<hr />
<p>Cars:</p>
<ol>
<li ng-repeat="car in main.cars">{{car.model}} - {{car.year}}</li>
</ol>
</body>
答案 0 :(得分：0)
请将activeCar初始化为空对象。 main.activeCar = {};
答案 1 :(得分：0)
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($q, $timeout) {
var main = this;
main.selectCar = selectCar;
main.models = ["Volvo", "VW", "Audi", "Ford", "Honda", "Jaguar"];
main.cars = [
{
year: 2006,
model: "Volvo"
},
{
year: 2011,
model: "Honda"
}
];
selectCar(main.cars[0]);
function selectCar(car){
//I use length = 0 in ng-disabled to user can't change 'year' while timeout interval (wait server response)
if (main.years) main.years.length = 0;
main.activeCar = {};
getDataFromServer('years', car).then(function(){
main.activeCar = car;
console.log(main.cars);
});
}
function getDataFromServer(nameForOptions, car){
//don't think about this function and logic inside it
var deferred = $q.defer();
//wait server response
$timeout(function(){
var arr;
if (nameForOptions === 'years') {
if (["Volvo", "VW", "Audi"].indexOf(car.model) > -1) {
arr = [2006, 2007, 2008];
} else {
arr = [2008, 2009, 2010, 2011];
};
}
main[nameForOptions] = arr;
deferred.resolve();
}, 100);
return deferred.promise;
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<body ng-app="plunker" ng-controller="MainCtrl as main">
<br /><br />
<button ng-click="main.selectCar(main.cars[0])">Load car 1</button>
<button ng-click="main.selectCar(main.cars[1])">Load car 2</button>
<br /><br />
<select id="select_1" ng-model="main.activeCar.model" ng-options="model for model in main.models" ng-disabled="!main.models.length"></select>
<select id="select_2" ng-model="main.activeCar.year" ng-options="year for year in main.years" ng-disabled="!main.years.length"></select>
<hr />
<p>Cars:</p>
<ol>
<li ng-repeat="car in main.cars">{{car.model}} - {{car.year}}</li>
</ol>
</body>