4

I have the following HTML:

<div class="row" ng-repeat="question in currentTemplate.questions">
    <div class="col-xs-4" ng-show="editingQuestion[$index]">
        <select style="width:100%;" ng-model="editingCurrentlySelectedAnswerOption[$index]"
        ng-options="answerOption as answerOption.back for answerOption in answerOptions">
        </select>
    </div>
</div>

I am wondering how I set the value of what is shown in the select statement. When the page loads, it should already be set, because I go through a for loop to set the values of editingCurrentlySelectedAnswerOption so that each one is preselected (the [$index] is referring to the index of an ng-repeat which this is inside of. Since there are multiple selects inside the ng-repeat, I need one spot per ng-repeat in the array to keep track of each individual selection), but instead it comes up as a blank spot first. I have used ng-init, a function that is called whenever a button is pressed which unhides the above div, and a function when the page loads. I have used bindings in the DOM and console.logs to check the values. They all seem to be correct. answerOptions in the ng-options is:

var answerOptions = [
    { front: "RadioButton", back: "Multi-Choice" }
    { front: "CheckBox", back: "Multi-Answer" }
    { front: "TextBox", back: "Free Text" }
];

When I print what editingCurrentlySelectedAnswerOption[$index] is it always comes up correctly showing an object just like one of the above objects, but for some reason it is always a blank select statement when it loads. Is there something I don't know about how ng-options work with objects? Or am I doing something else wrong?

UPDATE:

I am setting the values of editingCurrentlySelectedAnswerOption this way:

 this.scope.editingCurrentlySelectedAnswerOption = [];

for (var i in this.scope.currentTemplate.questions) {
if (this.scope.currentTemplate.questions.hasOwnProperty(i)) {
        this.scope.editingCurrentlySelectedAnswerOption.push(this.scope.currentTemplate.questions[i].answerType);
    }
}

the reason I am incrementing the amount of times there are questions in this.scope.currentTemplate is because in the html the ng-repeat repeats on the amount of questions as well. They should match up.

and this is how this.scope.currentTemplate.questions[0] is defined:

new Utilities.Question(
    "Question1",
    { front: "TextBox", back: "Free Text" },
    ["Yes", "Maybe", "No", "I don't know"],
    [50.0, 25.0, 0.0, -25.0]
)

and here is the definition of a Utilities.Question:

export class Question {
    question: string;
    answerType: any;
    answerOptions: string[];
    answerWeights: number[];

    constructor(question?: string, answerType?: any, answerOptions?: string[], answerWeights?: number[]) {

        this.question = question;
        this.answerType = answerType;
        this.answerOptions = answerOptions;
        this.answerWeights = answerWeights;

    }

}
tkd_aj
  • 993
  • 1
  • 9
  • 16
  • 1
    Can you show how you are setting the values of `editingCurrentlySelectedAnswerOption`? Just because objects have the same properties does not mean they are equal [(See Example)](http://jsfiddle.net/qb6rsm1m/). – Stryner Oct 10 '14 at 20:54
  • I updated it to make it more descriptive at the cost of being lengthy. – tkd_aj Oct 10 '14 at 21:05
  • Can you use string instead of object for `answerType` in `Question`? Then you bind options to `answerOption.front as answerOption.back for answerOption in answerOptions`. In my opinion @Ninsly has the point. – nrodic Oct 10 '14 at 21:09
  • The reason I don't use a string is because before you push the edit button to edit the question it will say, for example, the answer type is "radio button". Then, you push edit and the select appears, and it gives you the options of "Free Text", "Multi-Choice", or "Multi-Answer". These two different descriptions for the same things need to match up. So I am using an object to accomplish this. – tkd_aj Oct 10 '14 at 21:11
  • are you actually seeing any options in your your selects? Because im wondering how using `var answerOptions...` instead of `$scope.answerOptions = [...]` – malifa Oct 10 '14 at 21:13
  • Don't scope values inherit a bunch of stuff from other levels? That hasOwnProperty check would clobber any property that was inherited. – Erik Reppen Oct 10 '14 at 21:13
  • Yes, I am seeing all the options. I am using typescript with angular, so you don't need to declare a variable with var. I am implementing an interface which defines all of my variables like: answerOptions: string[]; – tkd_aj Oct 10 '14 at 21:16

1 Answers1

1

Everyone was correct that ng-model/ng-options refer to the reference of an object and not the value, so even though the two object's value were correct the references were not the same and, so, the select didn't see the ng-model variable as equal to the options given. To fix this I just added a track by to the end of my ng-options and it works now. Not sure if this is the best way to do it, but it works! Thanks for everyone's help!

tkd_aj
  • 993
  • 1
  • 9
  • 16