Adding an AngularJS directive dynamically that utilizes a $http request for fetching data

Question

Adding an AngularJS directive dynamically that utilizes a $http request for fetching data

Currently facing an intriguing issue,

I am attempting to create something like this:

input key 1 , input value 1

input key 2 , input value 2 < button to add more >

< submit button >

Essentially, a user can click submit and send a Get request to a specific URL. When they click to add more, a new row will appear with two input fields where additional http get parameters can be added.

I have tried coding this out, but I am stuck at this point: http://jsfiddle.net/d2jL2n35/1/

Your assistance would be greatly appreciated...

Two inquiries:

How can a new row be dynamically added after the plus box is clicked?

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>"
}

})

Resolved the first query by using $compile: http://jsfiddle.net/KyEr3/216/

How do you retrieve all the params and send a get request?????

javascript angularjs twitter-bootstrap-3 angularjs-directive angularjs-scope

Answer 1

Answer №1

Look at this basic example:

http://example.com/jsfiddle/abc123/

The key idea is to save each group of values in an array and utilize your directive to display them. I omitted the http call for simplicity, but in a real scenario, it might look something like this:

$http.get('/data').then( function( response ) {
    $scope.data = response;
} );

Answer 2

Look at this basic example:

http://example.com/jsfiddle/abc123/

The key idea is to save each group of values in an array and utilize your directive to display them. I omitted the http call for simplicity, but in a real scenario, it might look something like this:

$http.get('/data').then( function( response ) {
    $scope.data = response;
} );

Answer 3

Answer №2

If you're looking for a similar setup, consider the following example:

Sample

Preview:

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

Controller:

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=[];    
});

Please note that jsFiddle may block the get request, but this configuration should function in your application.

Answer 4

If you're looking for a similar setup, consider the following example:

Sample

Preview:

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

Controller:

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=[];    
});

Please note that jsFiddle may block the get request, but this configuration should function in your application.

Answer 5

Answer №3

Congratulations on leveling up to LEVEL 2 AWESOME ANGULAR HACKER!

As a beginner, it might be beneficial to start with just one directive instead of two when your directives are small. Directives can be powerful tools but can also add complexity to your code.

To retrieve data from inputs, you can utilize ng-model (https://docs.angularjs.org/api/ng/directive/ngModel)

After pasting your options' template into your values template, you can add a click event using ng-click=addParam() to the button.

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
  };
}

In the addParam function, you will need to add another option row. One method is to use a for loop that creates a div for each ng-repeat, resulting in a template like this:

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

To dynamically add another option row, increment noptions by 1 with $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;
};

By doing this, another option row will be dynamically added to your form.

Answer 6

Congratulations on leveling up to LEVEL 2 AWESOME ANGULAR HACKER!

As a beginner, it might be beneficial to start with just one directive instead of two when your directives are small. Directives can be powerful tools but can also add complexity to your code.

To retrieve data from inputs, you can utilize ng-model (https://docs.angularjs.org/api/ng/directive/ngModel)

After pasting your options' template into your values template, you can add a click event using ng-click=addParam() to the button.

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
  };
}

In the addParam function, you will need to add another option row. One method is to use a for loop that creates a div for each ng-repeat, resulting in a template like this:

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

To dynamically add another option row, increment noptions by 1 with $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;
};

By doing this, another option row will be dynamically added to your form.

Adding an AngularJS directive dynamically that utilizes a $http request for fetching data

Answer №1

Answer №2

Sample

Preview:

Controller:

Answer №3

Similar questions

Is there a way to automatically extract data from a CSV file and display it on a website using either PHP or JavaScript?

A Guide to Organizing Vue Js: Dividing 'methods', 'data', 'computed', and More into Separate JavaScript Files

Prisma DB is a versatile database that excels in handling m-n

Finding the index of a chosen option in Angular

Replacing text with new content when text is stored in a separate file

"Within Angular 2+, the attribute referenced is not recognized as a valid property, even though it is explicitly defined within the @Input

Incorporating HTML with ng-binds through transclusion

Update the link to a KML file used by Google Maps when a button is clicked

ng-tags-input not functioning as expected with autocomplete feature

encountered empty values when retrieving static paths

Elements that are added dynamically do not contain any space between each other

Error message encountered in node-schedule: Unable to read undefined property upon job restart

Guide to sending back a promise using JQuery

Add a static line of names to a JavaScript file

Interactive selection menu with jquery technology

Changing values in a select with multiple directives in AngularJs

Change the position of a Div by clicking on a different Div using JQuery for custom movements

What is the best way to locate an element through its parent?

What are the proper ways to implement JavaScript conditions?

How can I use oboe.js to target a specific node instead of selecting all matching nodes?