Question

这是我的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);
  }

我在这里做错了什么我甚至没有调用我的sellvalue功能的控制器部分

Answer 1

试试这个，

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>

Answer 2

有一些观点：

第1点：您已将ngModel放入<option>，而<select> tag位于ngClick。

第2点： click用于触发，显然click，它不是您在这种情况下应该使用的正确指令，因为{{1}并不意味着您更改了该字段的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>

我希望它有所帮助!!

如何从html到控制器获取选择值

2 个答案: