angularjs用ng-options绑定select表单,怎么改变select表单中option的value值样式?

Posted 2023-04-16

请教各位大侠，用angularjs绑定数据时，后台传过来的json数据是["id":"1","name":"张三","id":"2","name":"李四"],前台初始化接收json数据后传给stus,前台select表单绑定代码是<select ng-options="o.id as o.name for o in stus" value="o.id">o.name</select>。结果在网页中显示option中的value值是<option value="string:1" label="1">张三</option><option value="string:2" label="2">李四</option>..请问，在还使用ng-options的情况下，怎么能让option中的value值变为<option value="1" label="1">张三</option>.。因为在前台初始化时需要指定默认值，好比默认选中是<option value="string:2" label="2">李四</option>.所以不能用ng-repeat来循环option。求高手指教。
我重新描述一下问题。
在控制器中我将数组赋值如下：
$scope.stus=["id":"1","name":"张三","id":"2","name":"李四"];
在表单中绑定如下：

<select ng-model="stu" ng-options="o.id as o.name for o in stus">
<option value="">请选择</option>

</select>；
编译后查看网页源码大概如下：
<select >
<option selected="selected" class="" value="">请选择</option>
<option label="张三" value="string:1">张三</option>
<option label="李四" value="string:2">李四</option>
</select>
我的问题是：通过什么方式能把网页源码的value="string:1"变成value="1"，把字符类型去掉。

是angularjs版本的问题，采用1.3.6版本。

AngularJS诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。

AngularJS 是一个 javascript框架。它是一个以 JavaScript 编写的库。它可通过 <script> 标签添加到html 页面。

AngularJS 通过 指令 扩展了 HTML，且通过 表达式 绑定数据到 HTML。

AngularJS 是以一个 JavaScript 文件形式发布的，可通过 script 标签添加到网页中。

参考技术A angularjs版本的问题，采用1.3.6版本可以 参考技术B ng-options="o,name for o in stus strack by o.id"追问

您的方法可以去掉option前面的字符类型，但是我用这种方法，ng-model="stu"就无法绑定了。

参考技术C 好奇你那么写能生成option选项么？我照你的写法测试根本没选项啊～

<select ng-model="selectValue" ng-options="o.id as o.name for o in stus"></select>
$scope.selectValue = 某个id来设置默认选项

http://zhidao.baidu.com/question/561846503790127724 以前回答的一个关于select的。

Angularjs：使用ng-option时如何在选择中包含空选项

【中文标题】Angularjs：使用ng-option时如何在选择中包含空选项

【英文标题】：Angularjs: How to include empty option in select when using ng-option

【发布时间】：2013-03-17 00:43:34

【问题描述】：

当我使用 ng-option 提供不包含空选项的预定义选项列表时，如何在开头添加空选项？

玉中的一个例子

select(ng-model="property.Value", ng-options="item.Value as item.Name for item in property.Choices")

【参考方案1】：

只需在选择内添加一个具有空值的选项。

select(ng-model="property.Value", ng-options="item.Value as item.Name for item in property.Choices")
  option(value="")

这是一个例子 - http://jsfiddle.net/sseletskyy/uky9m/1/

【讨论】：

如果数据来自例如服务怎么办？除此之外，我通常会尽量避免控制器中特定于视图的内容。如果在视图中有一种方法可以做到这一点，那就太好了。也许使用指令？！

如果您选择一个选项然后想改回空选项，则无法正常工作。

@dang 请在它不起作用时提供一个示例，例如这是我的另一个例子 - codepen.io/sseletskyy/pen/KzYaQq

@SergeSeletskyy dang 指的是您提供的小提琴，第一个带有“默认显示空选项”的示例不能改回空白

【参考方案2】：

只需修改 angular 中的 property.choices 数组。

$scope.property.Choices.splice(0, 0, "id":"0","Name":"Richard");

【参考方案3】：

这只是通过修改对象对我有用

angular.extend('请选择' : '',objectName)