为什么我的数组变量在填充后没有显示在 ng-repeat 中? (AngularJs)
Why does my array variable is not displaying in ng-repeat after being filled? (Angular Js)
在我的申请中,在初始化时,我已经声明
vm.allStates = [];
然后我使用 ng-click 触发一个函数,并根据国家/地区更新状态。
vm.allStates = result;
console.log(vm.allStates);
我这样做得到了想要的输出。我的输出类似于
["selangor"];
然而在 HTML blade(因为我正在使用 Laravel 5.4),我写
<option ng-repeat="option in vm.allStates" value="{{ option }}">@{{ option }}</option>
它不输出任何东西。
同时,如果在初始化中,我声明,
vm.allStates = ["selangor"];
确实显示了,但是这不是动态的。
我想知道这是否与ng-model有关?
因为它不更新值,所以我可以 console.log 输出。
我不使用 ng-options,因为我需要一个选定的值作为占位符,(在这种情况下,默认情况下禁用和选中的选项。
谢谢
编辑 1:
storeService.storeByCountry(vm.countryId).then(function (response){
vm.totalStores = response.length;
if(response[0].country.has_zone){
vm.showZones = true;
vm.allZones = [...new Set(response.map(response => response.zone))];
vm.totalZones = vm.allZones.length;
vm.showFilterZones = true;
}
if(response[0].country.has_province){
vm.showProvinces = true;
vm.allProvinces = [...new Set(response.map(response => response.province))];
vm.totalProvinces = vm.allProvinces.length;
vm.showFilterProvinces = true;
}
if(response[0].country.has_state){
vm.showStates = true;
vm.allStates = [...new Set(response.map(response => response.state))];
vm.totalStates = vm.allStates.length;
vm.showFilterStates = true;
}
angular.forEach(response, function(value, key) {
addMarker({lat : +value.latitude, lng : +value.longitude}, vm.countryFilter);
});
console.log(vm.allStates);
panToCountry(vm.countryFilter);
return;
}, function(error){
APP.func.alerror(error);
});
您的代码的问题可能是您在 html
中使用了 vm.allState
。你不应该这样做(除非 vm
确实是别名)。我相信 vm
指的是您的控制器实例(通常如此)。在这种情况下,您应该使用 html.
中的控制器别名在控制器内使用任何变量
解释:
如果您的控制器有 vm.name = "Superman";
这将在 html
中作为 ctrl.name
而不是 vm.name
提供。您可能以不同方式命名了别名,您应该使用相同的别名。
经过一天的调试和思考,原来这个问题不是angular没有更新数组引起的。事实上,确实如此。
这里的问题是我使用的 select 样式插件。
我使用 bootstrap-select 来查看 select 框的外观,结果发现那里的值没有更新,
所以,当我删除这个插件时,我可以看到我想要的结果。
当然,这个问题有解决方法,但我决定不进一步研究它
在我的申请中,在初始化时,我已经声明
vm.allStates = [];
然后我使用 ng-click 触发一个函数,并根据国家/地区更新状态。
vm.allStates = result;
console.log(vm.allStates);
我这样做得到了想要的输出。我的输出类似于
["selangor"];
然而在 HTML blade(因为我正在使用 Laravel 5.4),我写
<option ng-repeat="option in vm.allStates" value="{{ option }}">@{{ option }}</option>
它不输出任何东西。 同时,如果在初始化中,我声明,
vm.allStates = ["selangor"];
确实显示了,但是这不是动态的。
我想知道这是否与ng-model有关? 因为它不更新值,所以我可以 console.log 输出。
我不使用 ng-options,因为我需要一个选定的值作为占位符,(在这种情况下,默认情况下禁用和选中的选项。
谢谢
编辑 1:
storeService.storeByCountry(vm.countryId).then(function (response){
vm.totalStores = response.length;
if(response[0].country.has_zone){
vm.showZones = true;
vm.allZones = [...new Set(response.map(response => response.zone))];
vm.totalZones = vm.allZones.length;
vm.showFilterZones = true;
}
if(response[0].country.has_province){
vm.showProvinces = true;
vm.allProvinces = [...new Set(response.map(response => response.province))];
vm.totalProvinces = vm.allProvinces.length;
vm.showFilterProvinces = true;
}
if(response[0].country.has_state){
vm.showStates = true;
vm.allStates = [...new Set(response.map(response => response.state))];
vm.totalStates = vm.allStates.length;
vm.showFilterStates = true;
}
angular.forEach(response, function(value, key) {
addMarker({lat : +value.latitude, lng : +value.longitude}, vm.countryFilter);
});
console.log(vm.allStates);
panToCountry(vm.countryFilter);
return;
}, function(error){
APP.func.alerror(error);
});
您的代码的问题可能是您在 html
中使用了 vm.allState
。你不应该这样做(除非 vm
确实是别名)。我相信 vm
指的是您的控制器实例(通常如此)。在这种情况下,您应该使用 html.
解释:
如果您的控制器有 vm.name = "Superman";
这将在 html
中作为 ctrl.name
而不是 vm.name
提供。您可能以不同方式命名了别名,您应该使用相同的别名。
经过一天的调试和思考,原来这个问题不是angular没有更新数组引起的。事实上,确实如此。 这里的问题是我使用的 select 样式插件。
我使用 bootstrap-select 来查看 select 框的外观,结果发现那里的值没有更新, 所以,当我删除这个插件时,我可以看到我想要的结果。 当然,这个问题有解决方法,但我决定不进一步研究它