有没有办法将ng-model绑定到指令中唯一的多个输入字段？

Question

在我的项目中我遇到了类似的问题。我需要在文本字段中绑定用户爱好。如果用户有一个爱好，他可以直接进入他拥有的爱好。但当他有多个时，他必须点击添加多个爱好按钮。当我使用指令动态显示输入字段时工作正常。但问题是来自ng-model的输入字段的值绑定到所有输入字段

这是我的代码。

提前致谢！

这些是图像

这就是我的方式

这就是我需要的

在HTML

中

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

  

在控制器

中

$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是在localStorage中存储用户的服务。

在指令

中

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

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

这是模板：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 1

对于这个我会建议其他一些方式，如果你的确定。

如果你的爱好是阵列，比如

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

或创建用于存储爱好的数组。

然后在inside指令中，你可以在指令中传递该对象。

我将使用ng-repeat inside指令。

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

所以每当用户点击＆＃34;添加爱好＆＃34;然后我们可以在指令中的爱好对象中添加空字符串。

每当用户点击删除时，您都可以从数组中删除该项目。