【问题标题】:My dropdownlist select onchange is not firing in angular js我的下拉列表选择 onchange 没有在 Angular js 中触发
【发布时间】:2019-06-24 20:02:02
【问题描述】:

我对@9​​87654321@ 非常陌生,我想获取下拉列表中OnChange 的值。

下面是我尝试过的代码

<div>
    <select ng-controller="UserSelection as User" ng-model="User.UserSelected" ng-change="onSelectChange()">            
        <option value="SAP_Executive">SAP Executive</option>
        <option value="Fiber_Engineer">Fiber Engineer</option>
        <option value="Fiber_Lead">Fiber Lead</option>
        <option value="CMM">CMM</option>
    </select>
</div>

角度代码

angular.module('App', [])
 .controller('UserSelection', function () {
  var User = this;      
  User.onSelectChange = function () {
      alert('change value selected');
  };
});

我的警报没有触发。请建议我在这里缺少什么

【问题讨论】:

  • 尝试使用ng-change="User.onSelectChange()" 而不是ng-change="onSelectChange()"
  • @SudhirOjha:这两个属性的值有什么区别??
  • 你已经为你的控制器创建了一个别名。
  • 完美..谢谢

标签: javascript html asp.net angularjs


【解决方案1】:

看这里下面的sn-p。您已经创建了控制器的别名,但没有使用它。

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<div ng-app="App">
    <select ng-controller="UserSelection as User" ng-model="User.UserSelected" ng-change="User.onSelectChange()" ng-init="User.UserSelected='--select--'">
        <option value="--select--">--select--</option>            
        <option value="SAP_Executive">SAP Executive</option>
        <option value="Fiber_Engineer">Fiber Engineer</option>
        <option value="Fiber_Lead">Fiber Lead</option>
        <option value="CMM">CMM</option>
    </select>
</div>

<script>
 angular.module('App', [])
 .controller('UserSelection', function () {
  var User = this;      
  User.onSelectChange = function () {
      alert('change value selected');
  };
});
</script>

</body>
</html>

【讨论】:

  • 加载时如何获取默认值“--Select--”?
  • 为什么会出现空白值,需要删除它吗?
  • 您希望默认选择哪个值?
  • 我想默认--Select--
  • @BN 完成,您可以使用ng-selected 。我已经更新了我的答案。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2019-06-25
  • 1970-01-01
  • 1970-01-01
  • 2021-11-01
  • 2019-03-04
相关资源
最近更新 更多