AngularJS ng-bind to specific array element

Question

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>

sometext is a string. sometextArray1 and sometextArray2 are arrays of strings. I just added the first one for me to validate that AngularJS and two-way binding works. — Jonas Arcangel
– Jonas Arcangel, Commented Oct 31, 2014 at 23:04
This sounds like a case for a directive, where you would transclude the contents of each item, and you would have a scope available to each. You would then aggregate each into a parent directive in the link function. — Dylan
– Dylan, Commented Oct 31, 2014 at 23:37

Stefan Bergh · Accepted Answer · 2014-10-31 23:45:22Z

4

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

edited Oct 31, 2014 at 23:45

answered Oct 31, 2014 at 23:01

Stefan Bergh

1063 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

soktinpk Over a year ago

Indexers are assignable as far as I know (but I haven't tested either).

Jonas Arcangel Over a year ago

I'm not iterating using Angular. I have repeated elements that were rendered from the server that's going to be like rows of input fields that go: sometextArray[1]... sometextArray[2] and so on. Are you suggesting I create repeated instances of a controller in this case? Can I instantiate an array of controllers in Angular?

Jonas Arcangel Over a year ago

Thanks. This worked. All I needed to do was to initialize the array properly. I originally set it as an array of string. What worked was to set it as an array of objects with a string property.

Stefan Bergh Over a year ago

Glad I could help. If you like my answer an up vote would be appreciated.

Dylan · Accepted Answer · 2014-11-02 05:21:56Z

0

You can add a directive to your list and another for each item using isolate scope.

Here's a plunker

you will get all the content of your items by transcluding them into a directive template

transclude: true,
//
<div ng-transclude></div>

You can add to your isolate scope per item from the attribute like you just need a way to index each scope like scope="scope1" | scope="scope2"

<list-item name="First Item" scope="scope1" func="func1(scope)">

In your directive you use operators like - @ String, = Model, & Function

// Directive
scope: {
  'name': '@',
  'iscope': '=scope',
  'func': '&'
}

Then in the container controller you can create the a sort of indexed array of item scopes like you would with an ng-repeat.

$scope.addItem = function(scope) {
   $scope.items.push(scope);
};

answered Nov 2, 2014 at 5:21

Dylan

4,7831 gold badge22 silver badges27 bronze badges

1 Comment

Jonas Arcangel Over a year ago

Thanks. I haven't tried this solution yet but I'll look at it sometime. I chose the other answer because I got it to work without requiring major changes to my existing code.

Collectives™ on Stack Overflow

AngularJS ng-bind to specific array element

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related