Example

Question

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

我正试图制作这类东西：

输入键1，输入值1

输入键2，输入值2＆lt;按钮添加更多＆gt;

＆LT;提交按钮＆gt;

基本上，用户可以单击“提交”并向给定的URL发出“获取”请求。现在当他点击添加更多时，会出现一个带有两个输入字段的新行，在那里他可以添加更多的http get paarmeters。

我尝试对此进行编码，但我接近这一点：http://jsfiddle.net/d2jL2n35/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>"
}

}）

使用$ compile：http://jsfiddle.net/KyEr3/216/

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

Answer 1

我猜你想要这样的东西：

Example

查看：

<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请求，但这应该适用于您的应用程序。

Answer 2

这是一个非常粗略的例子：

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

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

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

Answer 3

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

由于您的指令非常小，作为初学者，只有一个指令而不是两个指令可能更容易。指令是非常好的工具，但可以使事情变得更复杂。

要从输入中获取数据，您可以使用 ng-model （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-repeat创建一个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;
 };

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

动态添加带有$ http的angularjs指令来获取

3 个答案:

Example

查看：

控制器：