如何在 AngularJS 中定义选择选项值答案

【问题标题】：How do I define select option values in AngularJS如何在 AngularJS 中定义选择选项值
【发布时间】：2013-09-04 22:52:14
【问题描述】：

...同时维护模型绑定？

我有一个这样的选择菜单：

<select class="form-control" ng-model="activeTask" ng-options="task.title for task in tasks"> </select>

这样会填充一些文本：

<span>{{activeTask.title}}</span>

Projects 资源在这里抓取了一些 json（工作正常）：

function TimerCtrl($scope, Projects) {
    $scope.projects = Projects.get({}, {isArray:true}, function(projects) {
        $scope.tasks = $scope.projects[0].tasks;
        $scope.activeProject = $scope.projects[0];
        $scope.activeTask = $scope.tasks[0];
    });
}

这是Projects 服务（也可以正常工作）：

angular.module('projectServices', ['ngResource']).
factory('Projects', function($resource) {
    return $resource('data/projects.json', {}, {
        get: {method:'GET', isArray:true}
    });
});

这是 JSON（也可以）：

[
    {
        "title":"Chores",
        "url_title":"chores",
        "category":"Home",
        "tasks": [
            {"title":"Cleaning", "url_title":"cleaning"},
            {"title":"Yard Work", "url_title":"yard_work"},
            {"title":"Walking the Dogs", "url_title":"url_title"}
        ]
    },
    {
        "title":"Personal Website",
        "url_title":"personal_website",
        "category":"Work",
        "tasks": [
            {"title":"Design", "url_title":"design"},
            {"title":"Front End Dev", "url_title":"front_end_dev"},
            {"title":"Node Dev", "url_title":"node_dev"},
            {"title":"PHP Dev", "url_title":"php_dev"}
        ]
    }
]

Angular 自动创建的数值一切正常。我的问题是……值必须是对 url 友好的字符串 task.url_title，但选项文本应该是 task.title。

任何帮助将不胜感激。我想去喝杯啤酒！

所以，这是我采用的解决方案：

我使用 task 对象本身作为值，如下所示：

<select class="form-control" ng-model="activeTask" ng-options="task as task.title for task in tasks">

这让我可以轻松绑定 span 值以显示任务 title，而不是 url_title：

<span>{{activeTask.title}}</span>

感谢@sza 为我指明了正确的方向。他的建议在正确答案的cmets中。

【问题讨论】：

标签： javascript json angularjs

【解决方案1】：

您可以将理解表达式更改为

ng-options="task.url_title as task.title for task in tasks"

Working Demo

【讨论】：

我之前尝试过（在查看 api 文档时），但输出没有改变。它仍然将自动生成的整数显示为值。
@Jbird 为您添加了一个工作演示。如果你无法弄清楚，那就是别的东西了。
Angular 正在跟踪该值，但实际值属性在您的示例中仍显示为整数。这是当前应用程序的行为方式。另外，我提到的第二个挑战是我需要跨度来显示标题，而不是 url_title。
@Jbird 我在这个网站上已经解释过很多次了。这个值无关紧要。 AngularJS 在其自包含范围内管理值。所以真正重要的是模型变量而不是 html 中的实际值。
@Jbird 既然您使用 AngularJS，为什么不以正确的方式使用它呢？ AngularJS 的自包含范围为您封装了所有麻烦，您不必担心与 HTML 绑定相关的任何事情。如果您从范围访问任何模型，它就可以工作。有意义吗？

【解决方案2】：

您需要使用ng-options="..."。也使用ng-model="..." 否则将不起作用。

这是它的细分：

<select ng-options="ITEM.VALUE as ITEM.LABEL for ITEM in ITEMS" ng-model="val">
  <option>placeholder value which goes at the top of the element</option>
</select>

【讨论】：

我之前尝试过（在查看 api 文档时），但输出没有改变。它仍然将自动生成的整数显示为值。