CODEWITHSUNDEEP
javascriptjqueryangularjs
tkd_aj
tkd_aj

Reputation: 1063

ng-options with object set as ng-model

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;

    }

}

Upvotes: 4

Views: 148

Answers (1)

tkd_aj
tkd_aj

Reputation: 1063

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!

Upvotes: 1

Related Questions