Aquí está mi parte html

<select style="width:250px; height:50px">
                          <option ng-model="sellerDetails"  ng-click="sellerValue(sellerDetails)" >seller 1</option>
                          <option >seller 2</option>
                          <option >seller 3</option>
                        </select>

Aquí está mi parte del controlador

 $scope.sellerValue= function(sellerDetails){
    console.log("invoking sellerValue");
    console.log(sellerDetails);
  }

¿Qué está mal que estoy haciendo aquí? Ni siquiera estoy invocando la parte del controlador de mi función de valor de vendedor

0
Mohan Gopi 23 jul. 2016 a las 14:48

2 respuestas

La mejor respuesta

Hay algunos puntos:

Punto 1: ha colocado ngModel en <option>, mientras que debería estar en <select> tag.

Punto 2: ngClick se usa para activar, obviamente click, no es la directiva correcta que debe usar en este caso, porque una click no No significa que cambió el value de ese campo. El correcto es ngChange que detecta cambios reales.

Punto 3: dado que ya tiene almacenado el valor del elemento seleccionado en $scope.sellerDetails, no es necesario que lo pase como parámetro a su función.

Punto 4: le recomiendo que utilice ngOptions en lugar de hacerlo statically.

Véalo trabajando :

(function() {
  angular
    .module('app', [])
    .controller('mainCtrl', mainCtrl);

  function mainCtrl($scope) {
    $scope.sellers = [];
    
    function loadSellers(max) {
      for (var i = 1; i <= max; i++) {
        $scope.sellers.push("Seller " + i);
      }          
    }

    loadSellers(3);
    
    $scope.sellerValue = function() {
      console.log("sellerValue: ", $scope.sellerDetails);
    }
  }
})();
.select-field {
  width: 250px;
  height: 50px
}
<!DOCTYPE html>
<html ng-app="app">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
</head>

<body ng-controller="mainCtrl">
  Statically:
  <select class="select-field" ng-model="sellerDetails" ng-change="sellerValue()">
    <option>seller 1</option>
    <option>seller 2</option>
    <option>seller 3</option>
  </select>
  <hr>
  With ng-options:
  <select class="select-field" ng-options="seller for seller in sellers" ng-model="sellerDetails" ng-change="sellerValue()">
    <option value="" disabled hidden>Select a seller</option>
  </select>
</body>

</html>

¡¡Espero que ayude!!

0
developer033 23 jul. 2016 a las 22:00

Prueba esto ,

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.sellerDetails = 'seller 1';
  
   $scope.sellerValue= function(sellerDetails){
    console.log("invoking sellerValue");
    console.log(sellerDetails);
  }
  
});
<head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link href="style.css" rel="stylesheet" />
    <script data-semver="1.4.9" src="https://code.angularjs.org/1.4.9/angular.js" data-require="angular.js@1.4.x"></script>
    <script src="app.js"></script>
  </head>

  <body ng-app="plunker" ng-controller="MainCtrl">
   <select style="width:250px; height:50px" ng-model="sellerDetails" ng-click="sellerValue(sellerDetails)">
                          <option >seller 1</option>
                          <option >seller 2</option>
                          <option >seller 3</option>
                        </select>
  </body>
0
rejo 23 jul. 2016 a las 12:41