从X-editable Select中删除空选项

时间:2014-07-18 12:48:58

标签: javascript angularjs x-editable

我在过去几周内使用AngularJS和X-editable,困扰我的一件事是,select选项提供了一个空选项作为第一个孩子。
这是HTML

<span editable-select="curuser.roles" e-name="roles" e-ng-options="role as role.name for role in roles">
{{ showRoles() }}
</span>  

这是输出HTML:

<select name="roles" ng-options="role as role.name for role in roles">
   <option value="?" selected="selected"></option>
   <option value="0">Admin</option>
   <option value="1">Company</option>
   <option value="2">Manager</option>
</select>  

我需要做些什么才能摆脱这个空选项? 这是工作JSFiddle

3 个答案:

答案 0 :(得分:0)

更改您的代码:

e-ng-options = "role as role.name for role in roles"

e-ng-options="role.id as role.name for role in roles track by role.id"

在控制器中添加$ scope.apply。

当然,在您的控制器中,将新添加的行的默认值设置为roles[0]

对不起,如果为时已晚。我刚看到你的问题。

答案 1 :(得分:0)

你没有选择答案所以我认为我会提交我为其他有类似问题的人工作的小提琴。我更新了您的editable-select和您的e-ng-options。这是更新的小提琴http://jsfiddle.net/7e7kk/22/

  editable-select="roles[0].value" 
  ng-options="role.value as role.name for role in roles"

答案 2 :(得分:0)

这是正常行为。 我已经更新了你的jsfiddle,用ngOptions添加一个标准的select元素,你可以看到除非选择了1个选项,否则会有一个空白值: https://jsfiddle.net/vw4mkbou/2/

您需要将默认值设置为可用选项中的1或具有空状态: http://jsfiddle.net/vw4mkbou/4/