Как получить значение выбора из HTML в контроллер

0

Вот моя часть 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>

вот моя часть контроллера

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

что не так, я делаю здесь, я даже не вызываю часть контроллера моей функции sellervalue

  • 0
    Хм, почему вы привязываете ng-модель к вашему выбору, а не к избранному? Я не совсем понимаю, что происходит, но это странная конструкция.
  • 0
    вы неправильно использовали модель ng, пожалуйста , обратитесь к документации ng docs.angularjs.org/api/ng/directive/select
Показать ещё 1 комментарий
Теги:

2 ответа

0
Лучший ответ

Есть несколько моментов:

Пункт 1: Вы разместили ngModel в <option>, в то время как она должна быть в <select> tag.

Пункт 2: ngClick используется для запуска, очевидно, click, это не правильная директива, которую вы должны использовать в этом случае, потому что click не означает, что вы изменили value этого поля. Правильный - это ngChange который обнаруживает реальные изменения.

Пункт 3: Поскольку у вас уже есть значение выбранного элемента, хранящегося в $scope.sellerDetails вам не нужно передавать его в качестве параметра вашей функции.

Пункт 4: Я рекомендую использовать ngOptions вместо statically.

См. Работу:

(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>

Я надеюсь, что это помогает!!

0

Попробуй это,

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="[email protected]"></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>

Ещё вопросы

Сообщество Overcoder
Наверх
Меню