What is the angularjs way to databind many inputs?

Question

I\'m learning angularjs and I want to be able let the user enter many inputs. When these inputs are entered the list array elements should change accordingly. I

Answer 1

Here's a way to do it. I used textareas and a different structure to my repeaters, but the main concept is:

• display a simple value based on index. (not bound)
• on blur update the model
• on model update re-render

It is essentially, faking the binding.

Working fiddle - http://jsfiddle.net/VvnWY/4/

The html:

  


    Here's a few strings: 

    
{{strings[$index]}}

    Here's the strings as editable (twice so that you can see the updates from a model change): 

    
    

The JS:

var myApp = angular.module('myApp',[]);
angular.module('myApp', [])
  .controller('MyCtrl', ['$scope', function($scope) {
    $scope.strings = [ "foo", "bar", "cow" ];
   }])
  .directive('formTextareas', function() {
    return {
        restrict: "E",
        scope: {
            strings: '='
        },
        templateUrl: "textareas.html",
        link: function( $scope ){
            $scope.blur = function( $event, $index ){
                $scope.strings[ $index ] = $event.currentTarget.value;
            };
        }
    };
  })
;