【问题标题】：How to pass value as array in HTML/Angular如何在 HTML/Angular 中将值作为数组传递
【发布时间】：2015-04-24 10:25:32
【问题描述】：

我有一个表单，其中 m 有两个控件。一个是 MovieName 和其他 MovieCast。

提交时，我将值保存在 DB 中。
MovieName : String
MovieCast : Array

<form class="form-horizontal" role="form" name="adduserform" id="formid">
   <div class="form-group">
        <input type="text" ng-model="user.Movie_Id" name="MovCast" class="form-control"/>
        <input type="text" ng-model="user.Cast" name="MovCast" class="form-control" />
        <input type="submit" value="Add" ng-disabled="adduserform.$invalid" data-ng-click="Save()" class="btn btn-primary" />
   </div>
</form>

角度：

 $scope.Save = function () 
     {
         var Movie = {
                        _movieId: $scope.user.Movie_Id,
                        _cast: $scope.user.Cast
                      };
         var promisePost = MyService.postNew(Movie); //call to WEBAPI to store
         promisePost.then(function (pl) {
        alert("Movie Saved Successfully.");
     }

问题在于 Cast 数据类型是数组，输入的值是作为 Null 传递的
1) 如何处理 UI 和 angular 中的数组输入
2）我可以使用两个或更多的文本框吗？（但看起来很乱）
3）如果 gona 使用单个文本框如何将值分区为数组值

演员表示例：阿诺德、汤姆克鲁斯......

帮助我如何处理数组输入？？？

【问题讨论】：

如果您使用一个文本框，那么您可以使用逗号或其他东西来分隔它们。当您要发布表单时，您可以使用 JavaScripts split(',') 将该字符串拆分为一个数组。
你必须自己实现这个指令，或者使用一些现有的库。以isteven.github.io/angular-multi-select/#/main 为例

标签： html arrays angularjs

【解决方案1】：

这也是一个 UX 问题，也是创建简单自定义指令的绝佳机会：

Plunker Demo

我在演示中使用了 Bootstrap 来应用一些漂亮的样式，但您可以使用自己的模板和自定义样式。下面的示例仅显示了未应用 Bootstrap 的准系统模板。

指令：

app.directive('tagInput', function() {
    return {
        restrict: 'E',
        scope: { tags: '=' },
        template:
          '<input type="text" placeholder="Add an Actor..." ng-model="addval"></input> ' +
          '<button ng-click="add()" type="button">Add</button>' +
          '<div class="tags-list">' +
            '<span ng-repeat="(index, tag) in tags" ng-click="remove(index)">{{tag}}</span>' +
          '</div>',
        link: function ( scope, element ) {
            var inputelem = element.find( 'input' );
            
            // Add an item to the tags array
            scope.add = function() {
                if (scope.addval.length) {
                  scope.tags.push( scope.addval );
                }
                scope.addval = "";
            };
            
            // Remove an item from the tags array
            scope.remove = function ( index ) {
                scope.tags.splice( index, 1 );
            };
            
            // Add actors when ENTER key (keyCode === 13) is pressed
            inputelem.on( 'keypress', function ( event ) {
                if ( event.keyCode === 13 ) {
                    scope.$apply( scope.add );
                }
            });
        }
    };
});

指令非常简单。它在链接函数中定义了两种方法：一种将“标签”添加到列表中，另一种用于删除它们。为了让用户感觉更好，我添加了一个事件处理程序，用于侦听输入字段中按下的ENTER 键。这样，用户可以按ADD 按钮或ENTER 键来添加新项目。

控制器：

app.controller('ActorCtrl', ['$scope', function ( $scope ) {
    $scope.actors = [];
}]);

当您调用 save 函数时，您只需传入 $scope.actors 即可。

标记

<div ng-controller="ActorCtrl">
  <tag-input tags="actors"></tag-input>
</div>

tags 属性允许您传入控制器中数组的$scope 属性名称。这使得该指令更具可重用性。在演示中，您可以看到我还添加了一个label 属性，以便您可以在模板中使用该值。

为了提供更好的用户体验，我还添加了一些自定义样式，这些样式可以更改“标签”的背景颜色，并在您将鼠标悬停在它们上方时添加一个“X”。当然，这对移动用户来说是无用的，所以我也在模板中提供了一些说明。

当然有进一步改进这一点并提供更好的关注点分离的方法，但这是一个相当简单的实现，您可以根据自己的需要进行调整。

【讨论】：