AngularJS在下拉菜单中设置默认选择的选项 [英] AngularJS set default selected option in dropdown

问题描述

我对AngularJS比较陌生.学习它的每一点.我从事KnockoutJS的工作已经有两年了，发现使用JavaScript感到很舒服.

I am relatively new to AngularJS. Learning every bit of it. I have been worked on KnockoutJS for couple of years and find it comfortable to work on JavaScript.

我正在开发一个简单的任务管理器应用程序，该应用程序在对单个任务进行API调用时具有以下JSON.

I am working on a simple Task Manager app which has following JSON as a result on API call for individual task.

{
                      "Id": 1,
                      "title": "Culpa nisi irure qui consectetur non reprehenderit incididunt mollit voluptate culpa enim.",
                      "description" : "test description",
                      "owner": "Hunter Mcdonald",
                      "priority": 1,
                      "isActive": false,
                      "picture": "http://placehold.it/100x100",
                      "registered": "2014-12-29T17:13:33"
                  }

优先级值的含义是:

1 -高， 0 -中性， -1 -低

我从服务器收到的值严格以数字表示.

The value that I receive from server is strictly in numerical..

但是，在构建编辑表单时，我想在用户可以理解的文本中显示这些优先级，即高"，低"，普通"

However while building the edit form, I want to show these priorities in user understandable text i.e. "High", "Low", "Normal"

我已经创建了对象数组来实现这一目标-

I have created array of objects to achieve this -

vm.priorityOptions = [
    { name: "low", value: -1 },
    { name: "normal", value: 0 },
    { name: "high", value: 1 }
];

现在，我想从获得的API响应中选择默认的选定优先级，该优先级为"priority" : 1.由于它是数值，所以我不知道如何在vm.priorityOptions

Now, I want to select default selected priority from the API response I get that is "priority" : 1. Since it is numerical value, I don't know how can I select default selected option in vm.priorityOptions

在同一页面上有任何帮助或有用的代码段吗?

Any help or helpful snippet on the same?

推荐答案

您可以在<select>上使用ngOptions指令:

<select ng-options="item.value as item.name for item in vm.priorityOptions" 
        ng-model="vm.data.priority">
</select>

这是一个正常工作的 plunker .

这篇关于AngularJS在下拉菜单中设置默认选择的选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！