AngularJS＆LT;选择＆GT;选择NG选项值设置不正确 [英] AngularJS <select> ng-options selected value is not properly set

问题描述

我有这样的伪code angularjs应用程序。您可以选择一种爱好的每个人，保存并重新加载它。
然而，当我加载数据，选择框不要有选择正确的选项。 person.hobby 存在并且是正确的对象，但它看起来像没有设置正确NG-模式。
我缺少的东西吗？

 ＆LT; D​​IV NG重复=人的人＆GT;
    ＆所述p为H.; {{person.fullname}}＆下; / P＆GT;
    ＆LT;选择NG模型=person.hobby
            NG选项=＆GT由h.category为爱好^ h h.hobby_name团;
    ＆LT; /选择＆GT;
＆LT; / DIV＆GT;＆LT;脚本＆GT;     // ... ...控制器     $ http.get（'/ gethobbies /'）。更迭（数据）{
        爱好=数据;
     };    $ http.get（'/ getpeople /'）。更迭（数据）{
        人=数据;
        //看起来是这样的：[{全名：比尔·盖茨，爱好：{hobby_name'：'规划'，'分类'：'电脑'}，...]
    };
＆LT; / SCRIPT＆GT;
 

解决方案

NG-模型需要设置完全相同的对象作为一个在<$ C要$ C> NG-选项阵列被选中。角使用对象引用找出哪一个应该是积极的有这么一个业余爱好对象具有相同的hobby_name，如爱好的对象之一是不够的。它需要是相同的对象的引用。

查看特定详情文档

I have this pseudo code angularjs app. You can select a hobby for each person, save it and load it again. However when I load the data, the select boxes dont have the correct option selected. person.hobby exists and is the correct object, but it looks like ng-model isn't set correctly. Am I missing something?

<div ng-repeat="person in people">
    <p>{{ person.fullname }}</p>
    <select ng-model="person.hobby"
            ng-options="h.hobby_name group by h.category for h in hobbies">
    </select>
</div>

<script>

     //... controller...

     $http.get('/gethobbies/').succes(data) {
        hobbies = data;
     };

    $http.get('/getpeople/').succes(data) {
        people = data;
        // looks like this:  [{'fullname': 'bill gates', 'hobby': {'hobby_name': 'programming', 'category': 'computers'}, ...]
    };
</script>

解决方案

ng-model needs to be set to the exact same object as the one in the ng-options array that you want to be selected. Angular uses object references to figure out which one should be active so having a "hobby-object" with the same "hobby_name" as one of the objects in "hobbies" is not enough. It needs to be a reference to the same object.

See documentation for select for details

这篇关于AngularJS＆LT;选择＆GT;选择NG选项值设置不正确的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！