Question

我对AngularJS很新，所以我需要你的帮助。如果用户从下拉列表中选择，如何通过按钮单击检查？我有两个下拉菜单，我需要检查用户是否从两个下拉菜单中选择了一个。如果他没有选择并点击“提交”按钮，则会提示模式。

这是我到目前为止所尝试的：

HTML：

<select id="supplier" name="supplier" class="form-control"
  ng-model="searchFormData.supplier" ng-change="changeMeChange()"
  ng-options="supplier.company as supplier.company for supplier in suppliersObj">
</select>

JS：

$scope.changeMeChange = function() {
    alert('You changed me!');
};

但这只会通知下拉列表是否已更改，但不会在按钮单击中显示。

知道怎么做吗？

Answer 1

我会使用ng-model为两个下拉列表设置两个范围变量来存储所选值，然后在按钮的ng-click功能中，您可以检查两个变量以查看它们具有的值。

Answer 2

由于您的ng-model指向searchFormData.supplier，如果用户选择了一个选项，它就会拥有所选的值。因此，您可以在按钮单击中执行以下操作：

$scope.submitClick = function() {
  if (!$scope.searchFormData.supplier){
    alert('You did not select supplier!');
    return false
  }
};

Answer 3

将<{1}}与按钮一起使用，您将进入所调用的方法，如果您单击，并查看它是否正常工作，请使用ng-click="myMethod()"并查看您的网络控制台浏览器查看是否打印消息; P

示例代码：

好的我制作了这个示例代码，看看它是如何工作的（datos是我的控制器）

-HTML

console.log("hello world")

-Controller

<select id="supplier" name="supplier" class="form-control"
  ng-model="test.supplier" ng-change="changeMeChange()"
  ng-options="item as item.name for item in datos.testS track by item.id">
</select>
<button ng-click="datos.testSlack(test.supplier)">Check</button>

我们从选择的ng模型中获取数据，并将它作为对象的方法使用。

对于数据，您将获得选择选择的值，只要是因为用户不选择任何内容，我希望我会帮助您; P

Answer 4

尝试此操作以触发按钮单击选择框

$scope.changeMeChange = function() {
        alert('You changed me!');
    };

     <select ng-click='changeMeChange()'></select>

Answer 5

我理解的是，您希望检测用户是否更改了字段的下拉值。因此，您可以使用角度form验证，您可以在其中检查该字段是否为$dirty / $pristine。基于此，您可以显示modal 或可以调用特定功能。

<强>标记

<form name="myForm" ng-submit="mySubmit()">
  <select id="supplier" name="supplier" class="form-control"
     ng-model="searchFormData.supplier" ng-change="changeMeChange(searchFormData.supplier, supplier)"
     ng-options="supplier.company as supplier.company for supplier in suppliersObj">
  </select>
  ...other fields...
  <button type="button">Submit</button>
</form>

<强>代码

$scope.changeMeChange = function(field, supplier) {
    //field.$pristine OR !field.$dirty will tell you does field has changed or not
    if(!supplier && field.$pristine){
       //open modal from here.
    }
    else{
        alert('You changed me!');
    }
};

Answer 6

<select ng-options="size as size.name for size in sizes" 
   ng-model="item" ng-change="update()"></select>


$scope.changeMeChange = function() {
  alert('You changed me!');
};

一旦模型更改将调用警报

，您可以尝试这种方式

Answer 7

您需要将click事件绑定到按钮以检查下拉模型值。

以下是示例代码：

按钮的HTML代码：

<button data-ng-click="myFunction()">Click</button>

Angular Code：点击事件的功能，用于检查下拉值。

$scope.myFunction = function() {
    //Check model values of dropdown over here, based upon the result you can show prompt. 
    // You can access model value by scope variables.
};

希望上面的示例代码有助于您解决问题。

AngularJS通过按钮单击检测下拉列表是否已更改

7 个答案: