Add dynamic model to newly created elements via directives in angularjs

Question

Following is my PLNKR CODE which is working fine.

Problem - I need to add dynamic scope to these element so that I can grab the contact number + type.

I google the problem before asking but as I am new to directives in angular I am confused with the results, let me know what else I need to add to grab the result.

Following kind of result I am expecting -

contact: [
    {number: 56432452, type: "Cell"},
    {number: 67895644, type: "Work"},
    {number: 78943245, type: "Cell"},
    {number: 66793456, type: "Home"},
    {number: 90546675, type: "Fax"},
];

Also, I need to use the same form in EDIT mode, let me know what are the extra things that I need to keep in mind while developing this functionality for the edit case.

Following is my directive code -

<div class="form-group">
    <label class="col-sm-2 control-label">Contact Number<span class="asterisk">*</span></label>
    <div class="col-sm-5">
        <input type="text" class="form-control">
    </div>
    <div class="col-sm-2">
        <select class="btn">
            <option>Cell</option>
            <option>Work</option>
            <option>Home</option>
            <option>Fax</option>
        </select>
    </div>
    <div class="col-sm-1">
        <img src="http://img.informer.com/icons/png/16/3225/3225535.png" class="remCls">
    </div>
</div>

As you can see currently the select and input do not contain and ngModel. Let me know how do I introduce this to obtain the above mentioned result.

Not sure what you are talking about, but your plunkr has no directive (not to mention AngularJS code - it's jQuery mostly)... — gkalpak, Sep 12 '14 at 05:45
@ExpertSystem `I am new to directives` so whatever I can convert to represent my problem I did that...as I mentioned i need to get number + its type(home, work etc) ..I tried adding `ng-model="cntNum[i]"` in the code but it was not working.. — Trialcoder, Sep 12 '14 at 05:52
I am telling you, you are not using a directive. And your code looks more like a jQuery app than an Angular one (which are worlds apart - trust me). I suggest you do some more reading and studying tutorials. Once you get the "Angular way" you'll never go back (but you have to understand it first). You'll thank me later :) — gkalpak, Sep 12 '14 at 05:56
@ExpertSystem I am looking into this https://docs.angularjs.org/guide/directive right now..let me know if that suffice to my use case..otherwise I greatly appreciate if u share some url to understand the directive world properly :) — Trialcoder, Sep 12 '14 at 06:00
Let me be more clear on this: Understanding the directives is one step further than you are now. First try to understand Angular's basic concepts (custom directives are a somewhat more advanced topic). Try to understand how to construct an Angular app (and not a jQuery one). **Then** try to understand directives. — gkalpak, Sep 12 '14 at 06:04
The **[Developer Guide](https://docs.angularjs.org/guide)** has a great deal of resources. I definitely recommend the official tutorial and the free courses under "Learning Resources". (And since you seem to be coming from a jQuery background, **[this answer](http://stackoverflow.com/questions/14994391/how-do-i-think-in-angularjs-if-i-have-a-jquery-background)** is a must-read :) - We've all been there. Don't worry, you'll be up to speed in no time.) — gkalpak, Sep 12 '14 at 06:06
@ExpertSystem Thx for the expert comment :) I will surely go for a deeper dive in the angular world and once solved in `Angular Way` I will surely paste my answer with a thx for your comments :) — Trialcoder, Sep 12 '14 at 06:07
@ExpertSystem I solved it..thanks to the angular community :) — Trialcoder, Sep 12 '14 at 10:14

score 1 · Answer 1 · answered Sep 12 '14 at 09:07

I'm not sure this is what you need but I think you could define your controller as:

myApp.controller("myCtrl", function($scope){
  //Create and array of contacts in your model
  $scope.contacts = [];

  //Add a new contact to the model
  $scope.addContact = function() {
    var contacts = $scope.contacts;
    contacts[contacts.length] = {};
  }

  //Remove a contact from the model based on its index
  $scope.removeContact = function(index) {
    $scope.contacts.splice(index, 1);
  }
});

Then on your HTML, you leverage the Angular directives ng-repeat and ng-click:

<body ng-controller="myCtrl">
  <button ng-click="addContact()"> Add Contact </button>

  <div class="form-group" ng-repeat="contact in contacts">
    <label>Contact Number</label>
    <input type="text" ng-model="contact.contact">

    <select ng-model="contact.type">
      <option>Cell</option>
      <option>Work</option>
      <option>Home</option>
      <option>Fax</option>
    </select>

    <button ng-click="removeContact($index)"> Remove Contact </button>
  </div> <!-- Close Repeater -->
</body>

Here's your PLNKR link with the changes proposed: http://plnkr.co/edit/VWCdXSnOsY18XoCKxO0t?p=preview

score 1 · Accepted Answer · edited May 23 '17 at 11:49

First of all I would like to thank ExpertSystem for suggesting me to think in Angular way. Then I would like to thank Foxandxss and medice from angular IRC for making the things right not by code but improving my concept and approach for angular.

This is the WORKING code, I came up with for the above problem.

Actually I don't need directive and managed things easily without it.

medice: directives are fine, but when you set up click events that modify dom, it's gonna break

medice: angularjs can't bind directives properly

Following is my controller code -

var myApp = angular.module("myApp", []);

myApp.controller("myCtrl", function($scope){

  $scope.cnctnum = [];
  $scope.cncttype = [];

  $scope.types = [
    {name: "Cell", value: 1},
    {name: "Work", value: 2},
    {name: "Home", value: 3},
    {name: "Fax", value: 4}
  ];

  $scope.items = [];
  var i =0;
  $scope.addCnt = function(){
    $scope.items.push(i);
    i++;
  };

  $scope.remCl = function(index){
    $scope.cnctnum.splice(index, 1);
    $scope.cncttype.splice(index, 1);
    $scope.items.splice(index, 1);
  };

  $scope.getval = function(){
    console.log($scope.cnctnum);
    console.log($scope.cncttype);
  };

});

You didn't need to develop your own directives, but you still used the angular native directives ng-click, ng-repeat, ng-option, etc.. — Joao Leal, Sep 12 '14 at 10:25
@JoaoLeal yeah that is why I mentioned ..I was not looking the problem in `Angular` way — Trialcoder, Sep 12 '14 at 10:27

Add dynamic model to newly created elements via directives in angularjs

2 Answers2