javascript - 使用 ng-options 在 AngularJS 中使用 JSON 填充选择

标签 javascript json angularjs

编辑:我的代码确实有效,我只是个白痴,遇到了一个不相关的问题。感谢大家的投入。

所以我有一个格式如下的 JSON 对象数组:

[{"id":"id1", "text":"text1"}, {"id":"id2", "text":"text2"},....]

我想使用这些填充 AngularJS 选择字段,文本字段作为显示文本,id 字段作为值,或者绑定(bind)到模型的任何内容。我环顾四周,但终究无法弄清楚我需要做什么。

现在我有这个供我选择,结果没有显示:

<select name="field" ng-model="npe.formData.field" ng-options="field.id as field.text for field in fields">

以这种方式执行 ng-options 会导致显示内容,但显然会导致绑定(bind)到模型的值不正确:

ng-options="field as field.text for field in fields"

我看到有人在谈论使用“(key, value)”,但我无法理解它是如何工作的。

最佳答案

您将需要 (key,value) 以防您重复 map ,但事实并非如此 - 在您的示例中,您正在迭代一个对象数组。 (key,value) 的用法是:

$scope.map={item1:'a',item2:'b'};
...
<li ng-repeat="(id,text) in map">{{id}}) {{text}}</li>

这将呈现“item1) a”等等。

为什么您提到下面的代码段不起作用?

ng-options="field.id as field.text for field in fields"

检查这个 fiddle - http://jsfiddle.net/7eqsc/2/ ,它就像一个魅力,并使用正确的 ID 更新模型。

<div ng-app="myApp">
<div ng-controller="myCtrl">

    <div ng-repeat="(id,text) in notes">{{text}}</div>
    <select ng-model="model.id" ng-options="note.id as note.text for note in notes" ></select>

    Selected id:{{model.id}}

</div>

关于javascript - 使用 ng-options 在 AngularJS 中使用 JSON 填充选择,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24212342/

相关文章:

javascript - 在每次 ng-click 时增加 ng-repeat 的计数

javascript - Angular js 复选框中的问题

javascript - Soundmanager 2,无论我尝试什么,我都无法设置 SWF 路径

javascript - 请求的 URL "[no URL]"无效。 Node http-proxy

javascript - 保存修改后的 ColumnDataSource

json - 10.0.2.2 可以在我的 Android 模拟器中运行,但不能在我的 Flutter 物理设备中运行

java - 通过套接字将数据从 C++ 程序移植到 Java 程序的输入是否比通过服务器上的原始 json 或 xml 文件更快?

java - JSON <=> Java 对象映射器,可与 J2objc 很好地转换

javascript - CSS 过渡内联菜单

JavaScript 如果已经使用了 promise,我该如何克服 JavaScript 的异步性?