在带有ng重复的div中选择选项不会更改ng模型

Question

My ngModel myOpt2在选中时不会更改，myOpt(如果有效(。为什么它没有改变？

Mi ngModel myOpt2没有形成层，myOpt具有功能。Alguna razon por la que no cambia？

var app = angular.module('App_Alta', []);
app.controller('Ctrl_Categorias', function ($scope, $http) {
$scope.lstCatalogos = [{ sNombre: "Vehículos", iID: 1, iIdPadre: 0, bUltimo: false }]
$scope.lstSubCategorias = []
$scope.$watch("myOpt", function (newval, oldval) {
if (newval == undefined || newval.iID == 0) {
return false;
}
$scope.lstSubCategorias[0] = [{ sNombre: "Autos", iID: 17, iIdPadre: 1, bUltimo: true }]
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="example-wrap" ng-app="App_Alta" ng-controller="Ctrl_Categorias" id="AppAngular1">
<div>
<header Class="example-title">
Seleccione una categoria
</header>
<div class="example">
<select class="form-control" 
ng-model="myOpt" 
selectpicker="{ noneSelectedText: 'Seleccione una opción' }"
select-model="lstCatalogos"
ng-options="x.sNombre for x in lstCatalogos"></select>
</div>
<div class="example" ng-repeat="l in lstSubCategorias">
<select class="form-control"
ng-model="myOpt2" 
selectpicker="{ noneSelectedText: 'Seleccione una opción' }"
select-model="lstSubCategorias"
ng-options="x.sNombre for x in l"></select>
</div>
</div>
<p>{{myOpt}}</p>
<p>{{myOpt2}}</p>
</div>

没有坎比亚？

Answer 1

在设置myOpt2之前，请尝试检查myOpt是否确实发生了更改

$scope.$watch("myOpt", function (newval, oldval) {
if(newval !== oldval) {
if (newval == undefined || newval.iID == 0) {
return false;
}
// I'm assuming this is where you are trying to make myOpt2 selected based on first select
$scope.myOpt2 = [{ sNombre: "Autos", iID: 17, iIdPadre: 1, bUltimo: true }]
}
});

Answer 2

如果观察程序：，则可以使用ng-change指令来简化代码

var app = angular.module('App_Alta', []);
app.controller('Ctrl_Categorias', function ($scope, $http) {
$scope.lstCatalogos = [{ sNombre: "Vehículos", iID: 1, iIdPadre: 0, bUltimo: false }]
$scope.lstSubCategorias = [];
$scope.myOpt2 = [];
//$scope.$watch("myOpt", function (newval, oldval) {
$scope.myOptChange = (function(newval) { 
if (newval == undefined || newval.iID == 0) {
return false;
}
$scope.lstSubCategorias[0] = [{ sNombre: "Autos", iID: 17, iIdPadre: 1, bUltimo: true }]
});
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="example-wrap" ng-app="App_Alta" ng-controller="Ctrl_Categorias" id="AppAngular1">
<div>
<header Class="example-title">
Seleccione una categoria
</header>
<div class="example">
<!-- USE ng-change directive -->
<select class="form-control"
ng-model="myOpt"
ng-change="myOptChange(myOpt)"
ng-options="x.sNombre for x in lstCatalogos">
</select>
</div>
<div class="example" ng-repeat="l in lstSubCategorias">
<select class="form-control"
ng-model="myOpt2[$index]"
ng-options="x.sNombre for x in l">
</select>
</div>
</div>
<p>{{myOpt}}</p>
<p>{{myOpt2[0]}}</p>
</div>

使用ng-change指令可以提高性能，因为只有在选择发生更改时才会调用该函数，而不是在每个摘要周期进行脏检查。此外，由于Angular 2+没有$scope.$watch方法，它使将来迁移到Angular 2+变得更容易。

有关更多信息，请参阅

• AngularJS ng-change指令API参考
• 编写没有观察程序的组件