CODEWITHSUNDEEP
javascriptangularjsangularjs-ng-repeatstring-interpolation
Thomas Sebastian
Thomas Sebastian

Reputation: 1612

Using another scope object values within the ng-repeat of some other scope object

I have set up a fiddle to explain my question well. I would like to display the names from the $scope.gem inside ng-repeat [only one name for each ng-repeat and don't loop all] of $scope.knobItems without extending the knobItems scope. I want this to be made possible by maintaining the exact structure of controller as it is now. I am new to angular. I just wanna know if this is possible in angular and if is a good practice.

view 

<div ng-app="myapp">
    <div ng-controller="Mycont">
        <div ng-repeat="knobs in knobItems">
            <div ng-repeat="(key, value) in knobItems.nums">{{value.knobTitle}} : {{value.knobColor}}
                <div ng-bind="gem[0].name"></div>
            </div>
        </div>
    </div>
</div>

controller 

var ngMod = angular.module("myapp", []);
ngMod.controller("Mycont", function ($scope) {
    $scope.knobItems = {};
    $scope.knobItems.nums = [{
        knobTitle: "Company Profile",
        knobColor: "#f46607"
    }, {
        knobTitle: "Deals left This Month",
        knobColor: "#ffcc00"
    }, {
        knobTitle: "Pricelist",
        knobColor: "#f40787"
    }, {
        knobTitle: "Pictures",
        knobColor: "#a1b80a"
    }, {
        knobTitle: "Videos",
        knobColor: "#14b9d6"
    }];
    $scope.gem = [{
        name: "Thomas"
    }, {
        name: "Sebastian"
    }, {
        name: "June"
    }, {
        name: "Yuvan"
    }];
});

intended output
enter image description here

Upvotes: 1

Views: 325

Answers (3)

Rahul
Rahul

Reputation: 211

    <div ng-app="myapp">
        <div ng-controller="Mycont">
             <div ng-repeat="(key, value) in knobItems.nums">{{value.knobTitle}} : {{value.knobColor}}
                 <div ng-bind="gem[key].name"></div>
             </div>
        </div>
    </div>

Upvotes: 0

Michelangelo
Michelangelo

Reputation: 5948

Easy fix: fiddle

<div ng-app="myapp">
    <div ng-controller="Mycont">
        <div ng-repeat="knobs in knobItems">
            <div ng-repeat="(key, value) in knobItems.nums">{{value.knobTitle}} : {{value.knobColor}}
                <div ng-bind="gem[$index].name"></div>
            </div>
        </div>
    </div>
</div>

Upvotes: 1

Chris Charles
Chris Charles

Reputation: 4446

The output in you fiddle is exactly the same without the first ng-repeat: http://jsfiddle.net/2nrbrfxL/

Going by you description rather than you code:

<div ng-app="myapp">
    <div ng-controller="Mycont">
        <div ng-repeat="knobs in knobItems">
            <div ng-repeat="(key, value) in knobs">{{value.knobTitle}} : {{value.knobColor}}
                <div ng-repeat="gemItem in gem">{{gemItem.name}}</div>
            </div>
        </div>
    </div>
</div>

http://jsfiddle.net/p2fuq2du/

Upvotes: 1

Related Questions