Question

希望你很好，

我有以下表格：

<form  class="form-horizontal alert alert-warning" name="testForm" id="testForm" ng-submit="fun2();" hidden>
<h3 class="text-center">New Person</h3>
            <select   class="form-control" id="selPer" onchange="fun2()" >
                  <option ng-repeat="c in persons"  value="{{c.per_id}}">{{c.per_name}}</option>
            </select>       
    <div class="form-group">
        <button class="btn btn-warning" ng-disabled="testForm.$invalid">Add Person</button>
    </div>
</form>

表单主要包含select下拉列表和提交按钮，我在控制器中有这个功能：

myApp.controller("personCtrl",['$scope','$http','myService', function($scope,$http,myService){

$scope.fun2=function(){
    alert();
}
}]);

下拉效果很好，但是当我从下拉菜单中更改选择时功能不起作用，但是当我单击提交按钮时功能正常工作！因此它使用按钮而不使用onchange事件，请注意：当我将函数放在控制器外部时，它可以与onchange一起使用！

有什么问题？！

问候。

Answer 1

将<DropwdownList data={items} onSelect: (event) => { // Will give the `valueField` attribute you set, which for you is the item's `id` field // This might be the item name, or it might be something unique to DrowdownList console.log(event.target.value); } />属性更改为onchange。您无法从常规HTML事件访问控制器中的函数。 Angular希望您使用Angularized事件（ng-change）。

这就是提交表单时函数运行的原因。您正在使用ng-change，它允许Angular访问Angular控制器中的函数。

Answer 2

如果要捕获更改事件，则需要ng-model属性。

选择下拉列表中的Onchange不起作用

2 个答案: