How to pass value as array in HTML/Angular

Question

I've a form where m having two controls. One is MovieName and other MovieCast.

On submit, i'm saving the values in 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> 

Angular :

 $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.");
     }

Problem is as Cast data type is array, value entered is passing as Null
1) How to handle array inputs in UI and angular
2)Can i use two or more text boxes?(but looks messy)
3)If gona use single text box how can partition values as array value

Example of Cast entry : Arnold, Tom Cruise....

help me how to handle array inputs????

Answer 1

This is sort of a UX question as well, and would be the perfect opportunity to create a simple custom directive:

Plunker Demo

I used Bootstrap in the demo to apply some nice styling, but you can use your own template and custom styles. The example below shows just a barebones template without Bootstrap applied.

Directive:

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

The directive is pretty simple. It defines two methods in the link function: One to add 'tags' to the list and one to remove them. To make it nicer for the user, I added an event handler that listens for the ENTER key being pressed in the input field. This way the user can either press the ADD button or the ENTER key to add a new item.

Controller:

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

When you call your save function, you'd just pass in the $scope.actors for your cast.

Markup

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

The tags attribute allows you to pass in the name of the $scope property name for the array in the controller. This makes the directive a bit more reusable. In the demo, you can see that I also added a label attribute so that you can use that value in the template.

To provide a better user experience, I also added some custom styles that change the background-color of the 'tags' and add an 'X' when you hover over them. Of course, this would be useless for mobile users, so I provided a bit of instruction in the template as well.

There are certainly ways to further improve this and provide even better separation of concerns, but it's a fairly simple implementation that you can adapt to your needs.