Вот моя часть 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
Есть несколько моментов:
Пункт 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>
Я надеюсь, что это помогает!!
Попробуй это,
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>