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

Question

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

Pop-A-Stash · Accepted Answer · 2018-05-08 14:18:19Z

1

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">

edited May 8, 2018 at 14:18

answered May 8, 2018 at 13:58

Pop-A-Stash

6,6975 gold badges30 silver badges54 bronze badges

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

4 Comments

AJ- Over a year ago

Thank you for the answer! that is exactly what I was looking for! Didn't come to mind to pass the whole object in the function and access it from there!! For the ''ddList'' variable in ngModel, that was more of a placeholder in the fiddle as I couldnt find a working solution for the inputs! Thank you again! Do you have any idea how could I solve the second issue? Assign colors? Thank you

AJ- Over a year ago

so I tried to implement this, there is a problem, I need to actually change with the input fields the original values of ddList.supervisor and ddList.overseer, because they are shown elsewhere in the project, and if the user modifies those fields in the input[text], I need to show everywhere the updated values! I tried adding in the functio these lines: 'this.ddList[index].supervisor = this.InputFields[0].supervisor; this.ddList[index].overseer = this.InputFields[0].overseer;' and taking as second arg the index of the ng-repeat, but it doesnt seem to work!

AJ- Over a year ago

ok, I have a solution, let me know if there are better ones, this is my approach: jsfiddle.net/xytyg8vc/10

AJ- Over a year ago

Basically I added a new function, binded to a button, so when you change the input fields, you confirm with that button, and it's gonna copy the input values in the original array, and I access the original array by taking from the object besides supervisor and overseer value, also the index of the ng-repeat, which I use later on in the second function, is this a clean approach? or there are better ones?

Collectives™ on Stack Overflow

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

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related