AngularJS-在每个下拉选择上触发ng-change

凯尔·缪尔(Kyle Muir)

我有一个下拉菜单,用于选择要生成的报告,因此,当用户从下拉菜单中选择报告时,它将生成报告并下载到移动设备。使用ng-change只会在用户想要生成其他报告时才使用。我想要这样,他们可以选择两次相同的下拉菜单,然后两次下载报告。

我有类似的代码:

标记:

<div>
    <select ng-model="currentlySelected" 
            ng-options="opt as opt.label for opt in options" 
            ng-change="logResult()">
    </select>
    The value selected is {{ currentlySelected.value }}.
</div>

Javascript:

angular.module('demoApp', []).controller('DemoController', function($scope) {

    $scope.options = [
        { label: 'one', value: 1 },
        { label: 'two', value: 2 }
    ];
    $scope.currentlySelected = $scope.options[1];

    $scope.logResult = function() {
         console.log($scope.currentlySelected);   
    }
});

小提琴http : //jsfiddle.net/KyleMuir/cf59ypyw/

我期望选择两次“两次”,然后两次将结果记录到控制台。这是可行的还是应该为此使用其他指令?

可溶解的

添加一个按钮肯定会有所帮助,它还不需要进行任何其他编程,只是一个额外的元素:

http://jsfiddle.net/ootnh0sz/1/

<select ng-model="currentlySelected" ng-options="opt as opt.label for opt in options" ng-change="logResult()"></select>
<button ng-click="logResult()"> Go </button>

更新。

重置表单似乎是剩下的唯一选择。

http://jsfiddle.net/ootnh0sz/3/

$scope.logResult = function() {
     console.log($scope.currentlySelected); 

    // once downloaded
    $scope.currentlySelected = null;
}

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

AngularJS-在每个下拉选择上触发ng-change

来自分类Dev

选择下拉菜单上的ng-repeat进行ng-change只会触发一次

来自分类Dev

Angularjs 在 ng-change 上更新变量

来自分类Dev

AngularJs:如何为下拉菜单中ng-otons的选定值的默认值触发ng-change事件

来自分类Dev

AngularJS:触发ng-change,ng-keyup或$作用域。

来自分类Dev

AngularJS-ng-checked不会触发ng-change

来自分类Dev

ng-change延迟,angularjs

来自分类Dev

手动触发AngularJs ng-change事件

来自分类Dev

更改模型时AngularJS触发ng-change

来自分类Dev

AngularJS:在更改选择元素之前调用ng-change

来自分类Dev

AngularJS REST Api选择框ng-change

来自分类Dev

AngularJS:在更改选择元素之前调用ng-change

来自分类Dev

ng-click change route in angularjs with param

来自分类Dev

从 ng-Change 调用 AngularJs 服务

来自分类Dev

AngularJS-基于ng-model值触发ng-change

来自分类Dev

如何在AngularJS中的指令测试中触发ng-change

来自分类Dev

jQuery UI Selectmenu后未触发的AngularJS ng-change事件

来自分类Dev

AngularJS-用控制器初始化触发ng-change

来自分类Dev

AngularJS-当使用ng模型时,将忽略选择/下拉列表上的Value属性

来自分类Dev

如何在ng-change上使用ng-options获得重复项的值?AngularJS

来自分类Dev

AngularJS:当 ng-click 上的值更改时,ng-change 不起作用

来自分类Dev

使用ng-change根据AngularJS中的另一个下拉列表填充一个下拉列表

来自分类Dev

Angularjs 1.4 on-change不能使用Select触发

来自分类Dev

ng-change中不考虑jQuery datepicker选择的日期-AngularJS

来自分类Dev

ng-change中的angularjs旧值和新值,也为空选择

来自分类Dev

ng-change中不考虑jQuery datepicker选择的日期-AngularJS

来自分类Dev

如何从angularjs中的select的ng-change调用服务方法?

来自分类Dev

何时在Angularjs中使用$ watch或ng-change

来自分类Dev

在AngularJS中输入ng-change时如何提交表单

Related 相关文章

  1. 1

    AngularJS-在每个下拉选择上触发ng-change

  2. 2

    选择下拉菜单上的ng-repeat进行ng-change只会触发一次

  3. 3

    Angularjs 在 ng-change 上更新变量

  4. 4

    AngularJs:如何为下拉菜单中ng-otons的选定值的默认值触发ng-change事件

  5. 5

    AngularJS:触发ng-change,ng-keyup或$作用域。

  6. 6

    AngularJS-ng-checked不会触发ng-change

  7. 7

    ng-change延迟,angularjs

  8. 8

    手动触发AngularJs ng-change事件

  9. 9

    更改模型时AngularJS触发ng-change

  10. 10

    AngularJS:在更改选择元素之前调用ng-change

  11. 11

    AngularJS REST Api选择框ng-change

  12. 12

    AngularJS:在更改选择元素之前调用ng-change

  13. 13

    ng-click change route in angularjs with param

  14. 14

    从 ng-Change 调用 AngularJs 服务

  15. 15

    AngularJS-基于ng-model值触发ng-change

  16. 16

    如何在AngularJS中的指令测试中触发ng-change

  17. 17

    jQuery UI Selectmenu后未触发的AngularJS ng-change事件

  18. 18

    AngularJS-用控制器初始化触发ng-change

  19. 19

    AngularJS-当使用ng模型时,将忽略选择/下拉列表上的Value属性

  20. 20

    如何在ng-change上使用ng-options获得重复项的值?AngularJS

  21. 21

    AngularJS:当 ng-click 上的值更改时,ng-change 不起作用

  22. 22

    使用ng-change根据AngularJS中的另一个下拉列表填充一个下拉列表

  23. 23

    Angularjs 1.4 on-change不能使用Select触发

  24. 24

    ng-change中不考虑jQuery datepicker选择的日期-AngularJS

  25. 25

    ng-change中的angularjs旧值和新值,也为空选择

  26. 26

    ng-change中不考虑jQuery datepicker选择的日期-AngularJS

  27. 27

    如何从angularjs中的select的ng-change调用服务方法?

  28. 28

    何时在Angularjs中使用$ watch或ng-change

  29. 29

    在AngularJS中输入ng-change时如何提交表单

热门标签

归档