AngularJS ng-bind to specific array element

angularjs

I have elements in my page that's being repeated as rendered by ASP.Net MVC. (I need to do this for SEO purposes.)

Within these elements, I would like to have a text field that's bound by AngularJS.

Is there a way to do this?

In the code below, for example, the 2nd and 3rd text fields don't even allow me to type anything. Is it because I have not properly initialized the array or is there something wrong with the syntax?

<input type="text" ng-model="sometext" />
<input type="text" ng-model="sometextArray1[1]" />
<input type="text" ng-model="sometextArray2[1].value" />


<h1>Hello #1 {{ sometext }}</h1>
<h1>Hello #2 {{ sometextArray1[1] }}</h1>
<h1>Hello #3 {{ sometextArray2[1].value }}</h1>

Best Answer

If you are trying to let angular implicitly instantiate the array for you, I don't think arrays are assignable. If you are using a controller to instantiate your array this should work. I have created a fiddle.

JsFiddle

Html:

<div ng-app="mod">  
    <section ng-controller="Ctrl">
        <input type="text" ng-model="someArray[0].value" ng-change="logValue(0)" />
        <input type="text" ng-model="someArray[1].value" ng-change="logValue(1)"/>
        <input type="text" ng-model="someArray[2].value" ng-change="logValue(2)"/>
        <input type="text" ng-model="someArray[3].value" ng-change="logValue(3)"/>
    </section>
</div>

Code:

(function () {
    var app = angular.module('mod', []);

    app.controller('Ctrl', ['$scope', '$log', function ($scope, $log) {
        $scope.someArray = [
            {value: "value 0"}, 
            {value: "value 1"},
            {value: "value 2"}, 
            {value: "value 3"}
        ];

        $scope.logValue = function (index) {
            $log.info($scope.someArray[index]);
        }
    }]);
})();