使用$http动态添加angularjs指令

Dynamically adding angularjs directive with a $http to get

本文关键字：angularjs 指令 添加 动态 http 使用      更新时间：2023-09-26

我实际上遇到了一个有趣的问题，

我正试图制造这样的东西：

输入键1，输入值1

输入键2、输入值2<按钮添加更多>

<提交按钮>

基本上，用户可以点击提交并向给定的URL发出Get请求。现在，当他单击添加更多内容时，会出现一个新行，其中包含两个输入字段，他可以在其中添加更多http-get-paarmeters。

我试着把它编码起来，但我已经接近了：http://jsfiddle.net/d2jL2n35/1/

你能帮我吗…

两个问题：

  1. 单击加号框后，如何动态添加新行？

    myApp.directive('options',function(){
return {
    restrict:"E",
    template:"<div><input placeholder='params1' type='text'/><input placeholder='params2' type='text'><button><i class='glyphicon glyphicon-plus'></i></button></div>"
}

    })

Ok使用$compile解决了第一个问题：http://jsfiddle.net/KyEr3/216/

  1. 如何获取所有参数并发出获取请求

这里有一个非常粗略的例子：

http://jsfiddle.net/d2jL2n35/9/

关键是必须将每组值存储在一个数组中，并重用指令来显示它们。我删除了你的http调用，因为我不想勾画出echo服务。但如果你有一个真正的服务，它可能是这样的：

$http.get('/options').success( function( result ) {
    $scope.options = result;
} );

我猜你想要这样的东西：

示例

视图：

<div ng-app="myApp" ng-controller="mainController">
    <options parameters="parameters"></options>
</div>

控制器：

var myApp =  angular.module('myApp',[])
.factory('yourAPI', ['$http', function ($http) {
    var submitResults = function (parameters) {
        return $http.get("http://wwww.whateverURL.com?" + parameters.map(function(parameter){return parameter.key + "=" + encodeURI(parameter.val) }).join('&'));
    };   
    return {        
        submitResults: submitResults
    }
}])
.directive('options', function(){
    return{
        restrict:"E",
        replace:true,
        template: 
            "<div><option parameter='parameter' ng-repeat='parameter in parameters'></option>"+
        "<div>"+
            "<input type='text' placeholder='key' ng-model='newKey' /> " +
            "<input type='text' placeholder='value' ng-model='newVal' /> " +
            "<button ng-click='addItem()'><i class='glyphicon glyphicon-plus'></i></button>" +
        "</div>" +
        "<input type='submit' value='submit' ng-click='sendRequest()' /></div>",
        scope: { parameters:'='},
        controller: function($scope, yourAPI){            
            $scope.newKey="";
            $scope.newVal="";
            $scope.addItem = function(){
                $scope.parameters.push({key:$scope.newKey, val:$scope.newVal});
                $scope.newKey="";
                $scope.newVal="";        
            };
            $scope.sendRequest = function(){
                yourAPI.submitResults($scope.parameters).success(function(data, status, headers) {           
                    console.log(data);
                });
            }   
        }
    }
})
.directive('option', function(){
    return {
        restrict:'E',
        require: '^options',
        replace: true,
        scope: { parameter:'='},
        template: "<div>"+
                    "<input type='text' placeholder='key' ng-model='parameter.key' />" + 
                    "<input type='text' placeholder='value' ng-model='parameter.val' /></div>"
    }
})
.controller('mainController', function($scope){
    $scope.parameters=[];    
});

请注意，jsFiddle会阻止get请求，但这应该在您的应用程序中有效。

看起来您已经准备好升级到LEVEL 2 AWESOME ANGULAL HACKER了！

由于你的指令很小，作为一个初学者，只有一个指令而不是两个指令可能会更容易。指令确实是很好的工具，但会使事情变得更加复杂。

要从输入中获取数据，可以使用ng模型(https://docs.angularjs.org/api/ng/directive/ngModel)

因此，在将选项模板复制粘贴到values模板后，可以在按钮上放置一个单击事件，即ng-click=addParam()。

HTML:

<button ng-click="addParam()>

JS:

$scope.param1 = null;
$scope.param2 = null;
$scope.addParam = function () {
  $http.get('some url', {param1: param1, param2: param2}).success(data) {
     // add another option row
  };
}

在这个函数中，您需要添加另一个选项行。实现这一点的一种方法是使用for循环，为每个ng重复创建一个div，因此您的模板将如下所示：

<div ng-repeat="n in noptions">
  <input placeholder="params1" ng-model="param1" /> 
  <button ng-click="addParam()>
</div>

要添加另一个选项行，可以向noptions添加1，如$noptions +=1

https://docs.angularjs.org/api/ng/directive/ngRepeat

$scope.noptions = 0;
$http.get('some url', {param1: param1, param2: param2}).success(data) {
    $scope.noptions +=1;
 };

并且将动态地添加另一个选项行。

相关文章：