CODEWITHSUNDEEP
javascriptangularjs
Shardul Pendse
Shardul Pendse

Reputation: 304

create HTML element dynamically

I am very new to angular js. I want to create an input box on click of particular div. Here I need to create element on div which repeating.

<div><div ng-repeat ng-click="create();"></div><div>

What will be the best way to do so?

Upvotes: 1

Views: 257

Answers (2)

Sajith
Sajith

Reputation: 2852

Use an array and ng-repeat to do that. Have a look at the following code. I crated scope variable as an empty array. Then created a function to add values to that array.

app.controller('MainCtrl', function($scope) {
  $scope.inputFields = [];
  $scope.count = 0;
  $scope.addField = function(){
    $scope.inputFields.push({name:"inputText"+$scope.count++});
  }
});

I used ng-repeat with this array. and called the function on the click event of a div.

<div ng-click="addField()">Click here to add</div>
<div ng-repeat="inputField in inputFields">
   <input type="text" name="inputField.name">
</div>

Check this working link

Update - Show only one text box on click

I created addField() as follows. 

$scope.addField = function(){
  $scope.newTextField = "<input type='text' name='myTxt'>";
}

To render this html in my view file I created a new directive called compile as follows. 

app.directive('compile', function($compile) {
    // directive factory creates a link function
    return function(scope, element, attrs) {
        scope.$watch(
            function(scope) {
                // watch the 'compile' expression for changes
                return scope.$eval(attrs.compile);
            },
            function(value) {
                // when the 'compile' expression changes
                // assign it into the current DOM
                element.html(value);

                // compile the new DOM and link it to the current
                // scope.
                // NOTE: we only compile .childNodes so that
                // we don't get into infinite loop compiling ourselves
                $compile(element.contents())(scope);
            }
        );
    };
});

Then used this directive in my view.html file

<body ng-controller="MainCtrl"> 
  <div ng-click="addField()">Click to Add</div>
  <div compile="newTextField"></div>
</body>

click here to view the working link

Upvotes: 1

Wottensprels
Wottensprels

Reputation: 3327

DOM manipulation in Angular is done via directives
(There is paragraph on 'Creating a Directive that Manipulates the DOM' here)

First, read through this excellent article: How do i think in Angular if i have a jQuery background

The Angular Team also provides a pretty neat tutorial, which definetly is worth a look: http://docs.angularjs.org/tutorial

While Angular is pretty easy and fun to use once you have wrapped your head around the concepts, it can be quite overwhelming to dive into the cold. Start slow and do not try to use each and every feature from the beginning. Read a lot.

I strongly recommend egghead.io as a learning resource. The video-tutorials there are bite-sized and easy to watch and understand. A great place for both beginners and intermediates. Start from the bottom here.

Some folks have done great things with Angular. Take a look at http://builtwith.angularjs.org/ and check out some source code.

Upvotes: 3

Related Questions