Question

我是Angular的新人。我尝试打印表格。在表单中我有一个选择输入。当用户选择一个选项时，我不知道如何进行操作。我想在选择选项时从服务器检索数据。我只需要一个例子。

Answer 1

虽然这是一个老问题，但我想将Sunils评论添加为实际答案，因为它比执行自定义指令简单得多。如果要在用户选择其他选项时触发某些功能，只需在选择标记上使用ng-change。

在Controller-as语法中，它看起来像这样。请注意，即使您不需要在其他地方使用ng-model也很重要，因为如果我正确理解documentation，那么ng-change正在关注“yourModel”。

<div ng-controller="yourController as controllerName">
[...]
  <select ng-model="yourModel" ng-change="controllerName.yourFunction(yourArguments)">
    Your options here (or use ng-options on the select tag)
  </select>
[...]
</div>

在控制器中，您可以定义应该发生的事情：

this.yourFunction = function(yourArguments){ 
  //do your things here, e.g. http request 
}

Answer 2

你可以这样写一个指令：

           yourApp.directive('changed',function(){
               return function(scope,elem,att){
                   elem.bind('change',function(){
                       alert('hi');
                   })
               }
           });

然后你可以在你的视图中使用它：

         Your SELCET TAG here :

         <select changed>
            <option value="1">1</option>
            <option value="2">2</option>
         </select>

另外，如果你想将select中的任何内容传递给你的指令，你可以这样做：

         <select changed="passthis">
            <option value="1">1</option>
            <option value="2">2</option>
         </select>

然后在你的指令中你可以得到你发送的内容：

           yourApp.directive('changed',function(){
               return function(scope,elem,att){
                   elem.bind('change',function(){
                       // below will alert: "passthis"
                       alert(att.changed);
                       // bellow will alert what ever option user has choosed
                       alert(elem.value());

                   })
               }
           });

您想在选择更改时运行$ http请求吗？容易：

           yourApp.directive('changed',function($http){//notice here I injected $http
               return function(scope,elem,att){
                   elem.bind('change',function(){
                       $http.post('YourUrl',{yourDataTosend})
                       .success(function(msg){
                         alert("msg from your backend: ",msg)
                        }).error(function(){
                            alert('Error');
                         })
                   })
               }
           });

AngularJS：如何触发选择选项的操作？

2 个答案: