Question

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

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

<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自动创建的数值，一切正常。我的问题是......值必须是符合网址的字符串task.url_title，但选项文本应为task.title。

非常感谢任何帮助。我想去喝啤酒！

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

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

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

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

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

感谢@sza，他指出了我正确的方向。他的建议在正确答案的评论中。

Answer 1

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

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

的 Working Demo

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

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

2 个答案: