Sukumar Dhoni Sukumar Dhoni - 1 year ago 88
HTML Question

is there any way to bind ng-model to multiple input fields uniquely inside a directive?

In my Project i Got a Issue like.I need to bind the user hobbies in the text field.if the user comes with a single hobby he can directly enter the hobby that he has. but when he had multiple then he had to click add multiple hobbies button.that working fine when i am displaying input fields dynamically using directives.but the issue is the value that coming from ng-model for that input field is binding to all input fields.

Here is my code.

Thanks in advance!

these are the images



this is how i am getting
enter image description here

this is what i need
enter image description here

In HTML



<div>
<div id="showHobbyfield"></div>
<input type="number" class="form-control" placeholder="ADD HOBBIES"
ng-click="addHoby()">
</div>






In controller



$scope.addHoby= function(){
var compiledeHTML = $compile("<div my-hobby></div>")($scope);
$("#showHobbyfield").append(compiledeHTML);
};

$scope.addUser = function(){
$scope.Users= [];

var obj = {
userhobby : $scope.user.morehobies

};
$scope.Users.push(obj);
menuStorage.put($scope.Users);


//menustorage is service to store user in localStorage.

In directive



'use strict';
angular.module('myApp')
.directive('myHobby', function() {

return {
scope : false,
templateUrl: 'views/my-hobby.html'
};
});


this is template: my-hobby.html



<div class="input-group">
<input type="text" ng-model="user.morehobies" class="form-control" placeceholder="type your hobbies here">

<div class="close-icon">
<span class="glyphicon glyphicon-remove" style="padding-left: 6px;"> </span>
</div>
</div>

Answer Source

For this i would suggest some other way if its ok with you.

If your hobbies is coming in array, like

user.morehobies = ['Reading', 'Writing']

or create array for storing hobbies.

then inside directive you can pass that object in directive.

I will use ng-repeat inside directive.

<div class="input-group" ng-repeat="h in hobies">
        <input type="text" ng-model="h" class="form-control" placeceholder="type your hobbies here">
      <div class="close-icon">
        <span class="glyphicon glyphicon-remove" style="padding-left: 6px;"> </span>
      </div>
</div>

so whenever user clicks on "Add hobbies" then we can add empty string in hobbies object in directive.

and whenever user clicks on remove you can remove that item from array.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download