Sukumar Dhoni Sukumar Dhoni - 4 months ago 15
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

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.