Question

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

＆＃13;

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;
  };
});

＆＃13;

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

＆＃13;

这在加载时按预期运行，但是当用户编辑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);
};

这将是IMO更好的方法。

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

2 个答案: