Angular JS 将字符串数组传递给指令

Question

我有以下指令，它从数组数据中输出数字和相应的字符串值。

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

app.controller("Ctrl1",function($scope){
    $scope.range = 5;
    $scope.data = ['a','b','c','d','e',];
});
app.directive("myDirective", function(){
    return {
        restrict: "EA",
        scope: true,
        template: "<div ng-repeat='n in [] | range:range'>{{n + 1}} - {{data[n]}}</div>"
    };
})
.filter('range', function() {
  return function(input, total) {
    total = parseInt(total);
    for (var i=0; i<total; i++)
      input.push(i);
    return input;
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="test">
    <div ng-controller="Ctrl1">
        <label>Edit range </label> <input ng-model="range" /><br>
      <label>edit data </label> <input ng-model="data" /><br>
        <my-directive></my-directive>
    </div>
</div>

这在加载时按预期运行，但是当用户编辑 ng-model="data" 时，输出中断，因为它将 , 作为数组中的一项包含在内。

实现此功能的最佳方法是什么，以便当用户更新数据时指令仍像最初那样处理数组？（如果需要，我很乐意用逗号分隔数据中的项目或其他方法，例如 |。）

Answer 1

<input ng-model="data" /> 会将新值写入字符串而不是数组。您需要将字符串拆分为一个数组请参阅 http://www.w3schools.com/jsref/jsref_split.asp

Answer 2

更好的方法是有一个函数来压入和弹出数组中的输入数据。类似于以下内容：

HTML :

<input type="text" ng-model="inputdata" ng-click="pushDataInArray(inputdata);"></input>
//And similarly have a function to pop the data from whichever index from the array.

JS：

$scope.pushDataInArray = function(inputdata){
 $scope.data.push(inputdata);
};

在我看来，这将是一个更好的方法。

Angular JS 将字符串数组传递给指令

Angular JS pass array of strings into directive

javascript

arrays

angularjs

angularjs-directive

angular-ngmodel