CODEWITHSUNDEEP
angularjstwitter-bootstrapangularjs-ng-repeatdropdown
AJ-
AJ-

Reputation: 1783

AngularJS issue with dropdown menu and accessing elements outside ng-repeat

this is my problem:

I have a DIV, where you have 4 fields: 2 dropdowns and 2 input[text].

3 of the fields get populated by a ng-repeat over an array of objects:

$scope.ddList = [
        {
          code: 1253,
          name: "test13",
          supervisor: "cas3",
          overseer: "cas32",
          kstTextColor: "#000",
          kstBackgroundColor: "#fff"

        }, and so on..

and the last 4th field has it's own array that gets repeated to populate it:

 $scope.ddColor = [
        { backgroundcolor: "rgb(255, 170, 14)",
        textcolor: "#fff"
        },
        {backgroundcolor: "rgb(245, 73, 73)",
        textcolor: "#fff"

        }, and so on...

The main dropdown, which loops over ddList and shows the element: ddList.name is the problem.

I want that when you select an element from that dropdown, the 2 input[text] fields, get populated by the other 2 properties in that object, ddList.supervisor and ddList.overseer .

The issue is that the dropdown has the ng-repeat inside its template file, so the 2 input[text] fields are out of it, and I can't just call ng-model="k.supervisor" and ng-model="k.overseer" because they are out of scope.

How can I solve this? So based on the selection in the first dropdown, populate the input[text].fields with the corresponding object?

The second problem I have, is about the second dropdown menu with its own ng-repeat and array.
I want that when an element is chosen in the first dropdown, the user can select one "color" from the second dropdown, and that color properties: ddColor.backgroundcolor and ddColor.textcolor will get copied onto the main array, over the properties: ddList.kstTextColor and ddList.kstBackgroundColor.

I think I could resolve the second issue when I have a solution for the first one, because it has the same problem, I can't access to the scope of that ng-repeat, so I can't call with a function the right elements in the loop and overwrite them with the new colors.

Here a jsFiddle:

http://jsfiddle.net/xytyg8vc/8/

Thank you very much

Upvotes: 0

Views: 96

Answers (1)

Pop-A-Stash
Pop-A-Stash

Reputation: 6652

http://jsfiddle.net/xytyg8vc/9/

When you update typeSelection pass the entire object in your ng-click expression:

<li role="menuitem" ng-click="selectType(k)" ng-repeat="k in ddList track by $index"><span>{{k.name}}</span>

This way, in your controller, you can access all the properties of the object:

$scope.selectType = function(item) {
    $scope.typeSelection = item.name;
    $scope.inputs = {
      supervisor: item.supervisor,
      overseer: item.overseer
    };
};

I'm not sure why you are using the ddList variable as your ngModel for your inputs. That is confusing and should be avoided. Have separate unique variables for the inputs makes more sense:

<input type="text" ng-model="inputs.supervisor">
<input type="text" ng-model="inputs.overseer">

Upvotes: 1

Related Questions