how to make the default value of ng-options stay selected

Question

how to make the default value of ng-options stay selected

Navigation

#1 by (1 votes)

0

I have the following case when using ng-options in my dropdownlist.

This is my html:

<div class="col col50 colmin">
    <div class="pull">
        <div>{{selectIdCuenta.nombreAlias}}</div>
            <select name="ifield06" ng-model="selectIdCuenta" ng-change="getListRecibos()" ng-options="cuentas.nombreAlias for cuentas in listCuentasCoorporativas">
                <option value="">Cuenta</option>
            </select>
         </div>
     </div>
</div>

and this is my controller that fills the select:

  productoServicio.getCuentasCoorporativos().then(function(response) {
      $scope.listCuentasCoorporativas = response.data.obtenerListadoMovilCorporativoCuentaResponse.listadoCuenta;
      angular.forEach($scope.listCuentasCoorporativas, function(val, key) {
          if (val.idCuenta == idCuentaCoor) {
              $scope.selectIdCuenta = $scope.listCuentasCoorporativas[key];
          }
      });
   }, function(error) {
      $scope.status = 'El cliente no cuenta con Lineas Moviles Coorporativas: ' + error.message;
   });

which works well when rendering and the $scope.selectIdCuenta is selected correctly but when you give it in the value "Cuenta" the dropdown shows empty and does not load the value "Cuenta" .

I'm checking that it does not do anything if you select that value but I need to show the default value "Cuenta" of the HTML.

Please any help or guide Greetings

Additionally the array that I get (Json) is as follows:

{   
    "listadoCuenta": [{
        "idCuenta": "1000.123.67",
        "nombreCuenta": "Principal",
        "aliasCuenta": "Padre",
        "nombreAlias": "Padre"
    }, {
        "idCuenta": "1000.543.1",
        "nombreCuenta": "Principal",
        "aliasCuenta": "Padre",
        "nombreAlias": "Cta Nueva"
    }, {
        "idCuenta": "5.4300.12",
        "nombreCuenta": "Principal",
        "aliasCuenta": "Padre",
        "nombreAlias": "Cta Otros"
    }]
}

javascript angularjs

asked by jose.luis.lopez 06.09.2016 в 03:17

source

1 answer

Laravel | Fill in 2 MySQL tables at the same time Auth :: login ($ user) laravel

score 1 · Answer 1

The value is being selected correctly, what happens is that angular is noble and unlike JavaScript does not throw errors when you bind to a property that gives null or undefined . This of course only applies to the view and not to the JavaScript code.

For example you can do this

$scope.test = {};

and in the view you can have this

{{test.foo.bar}}

In JavaScript you would have thrown an error immediately as this is telling you to access the property foo of the object and that in this access the property bar . In this case foo is undefined and I would have given you the error.

Can not access property% co_of% of% co_of%

var test = {};

console.log(test.foo.bar);

In angular does not happen like this

angular.module('app', [])
  .controller('TestCtrl', function($scope) {
    $scope.test = {};

    $scope.nullable = null;
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="TestCtrl">
  Aqui debería ir el contenido {{test.foo.bar}} {{nullable}}
</div>

In that particular case bar will give the value undefined to your variable and therefore no content will come out.

Since this is the expected behavior of angular if you want it to show you something you can create a filter that shows you a text in case the received value is ng-options

This is an example using a null filter

angular.module('app', [])
  .controller('CuentasCtrl', function($scope) {
    $scope.listCuentasCoorporativas = [{
      "idCuenta": "1000.123.67",
      "nombreCuenta": "Principal",
      "aliasCuenta": "Padre",
      "nombreAlias": "Padre"
    }, {
      "idCuenta": "1000.543.1",
      "nombreCuenta": "Principal",
      "aliasCuenta": "Padre",
      "nombreAlias": "Cta Nueva"
    }, {
      "idCuenta": "5.4300.12",
      "nombreCuenta": "Principal",
      "aliasCuenta": "Padre",
      "nombreAlias": "Cta Otros"
    }];

    $scope.muestraDatos = function() {
      console.log($scope.selectIdCuenta);
    }
  })
  .filter('unselected', function() {
    return function(input) {
      return input === undefined ? 'No seleccionado' : input;
    };
  });

select {
  border: solid 1px gray;
  border-radius: 3px;
  padding: 5px 10px;
  width: 400px;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="CuentasCtrl">
  <div>{{selectIdCuenta.nombreAlias | unselected}}</div>
  <select name="ifield06" ng-model="selectIdCuenta" ng-change="muestraDatos()" ng-options="cuentas.nombreAlias for cuentas in listCuentasCoorporativas">
    <option value="">Cuenta</option>
  </select>
</div>

As you can see neither the binding nor the logic are altered since the filters only modify the value shown in the view.

You can also use an expression but be careful with this because if for example you use undefined or unselected as value of one of your options you can fail.

angular.module('app', [])
  .controller('CuentasCtrl', function($scope) {
    $scope.listCuentasCoorporativas = [{
      "idCuenta": "1000.123.67",
      "nombreCuenta": "Principal",
      "aliasCuenta": "Padre",
      "nombreAlias": "Padre"
    }, {
      "idCuenta": "1000.543.1",
      "nombreCuenta": "Principal",
      "aliasCuenta": "Padre",
      "nombreAlias": "Cta Nueva"
    }, {
      "idCuenta": "5.4300.12",
      "nombreCuenta": "Principal",
      "aliasCuenta": "Padre",
      "nombreAlias": "Cta Otros"
    }];

    $scope.muestraDatos = function() {
      console.log($scope.selectIdCuenta);
    }
  });

select {
  border: solid 1px gray;
  border-radius: 3px;
  padding: 5px 10px;
  width: 400px;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="CuentasCtrl">
  <h3>Con el operador ||</h3>
  <div>{{selectIdCuenta.nombreAlias || 'No seleccionado'}}</div>
  <select name="ifield06" ng-model="selectIdCuenta" ng-change="muestraDatos()" ng-options="cuentas.nombreAlias for cuentas in listCuentasCoorporativas">
    <option value="">Cuenta</option>
  </select>
  <h3>Con el operador ?</h3>
  <!-- Esta version es un poco fea-->
  <div>{{selectIdCuenta.nombreAlias === null || selectIdCuenta.nombreAlias === undefined ? 'No seleccionado' : selectIdCuenta.nombreAlias}}</div>
  <select name="ifield06" ng-model="selectIdCuenta" ng-change="muestraDatos()" ng-options="cuentas.nombreAlias for cuentas in listCuentasCoorporativas">
    <option value="">Cuenta</option>
  </select>
</div>