option select within div with ng-repeat does not change ng-model

Question

My ngModel myOpt2 does not change when selected, myOpt if it works. Any reason why it does not change?

Mi ngModel myOpt2 no cambia al ser seleccionado, myOpt si functiona. 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>

no cambia?

I am voting to close this question as off-topic because the problem was caused by a simple error (variable initialization). This question was resolved in a manner unlikely to help future readers. — georgeawg, Aug 01 '18 at 00:48

score 0 · Answer 1 · answered Jul 31 '18 at 23:07

0

Try checking whether myOpt has actually changed, before setting myOpt2

$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 }]
  }
});

answered Jul 31 '18 at 23:07

Gabe Gates

902
1
14
19

No problem, glad I could help you out – Gabe Gates Aug 01 '18 at 00:08

georgeawg · Answer 2 · 2018-08-01T06:42:36.693

The code can be simplified by using the ng-change directive instead if a watcher:

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>

Using the ng-change directive enhances performance as the function is invoked only when the selection changes instead of dirty checking on every digest cycle. Also it makes future migration to Angular 2+ easier as Angular 2+ has no $scope.$watch method.

For more information, see

You saved my life, I clung to the method and it did not let me move forward. Thank you very much. — Yair GR, Aug 01 '18 at 06:26

option select within div with ng-repeat does not change ng-model

2 Answers2