15

这里有一些快速的背景信息。我刚刚升级到 Angular 1.4。我正在使用用 C# 编写的 API 进行服务器端调用。

我页面的一部分显示了 2 个选择列表（项目和子项目）。两者都应该默认为“（选择一个 ______）”，我将其列为每个选择的第一个选项，“值”为 0。适当的 ng-model 变量初始化为 0。

选择列表的实际 HTML 代码是在服务器端使用字符串连接生成的，通过 $http 传递给客户端，并使用调用 $compile 的指令插入（一点也不理想，但我的客户端几乎把我锁住了到这个 API）。在 1.4 更新之前，一切都运行良好。

现在，我的项目选择列表默认为空。当我检查元素时，这就是我所看到的......

<select ng-change="updateSubProjList()" ng-model="curProjID">
    <option value="? number:0 ?"></option>
    <option value="0">(Select a Project)</option>
    <option value="1">First Project</option>
    <option value="2">Second Project</option>
    ...
</select>

...与第一个“？数字：0？” 条目是当前选择的条目。我的子项目选择列表仍然初始化得很好，这使得这更加奇怪。

我知道在 AngularJS 1.4 的更新中对 $compile 进行了一些更新，但我无法找到解决问题的方法。任何帮助将不胜感激。

4

4 回答 4

24

1.4 中似乎有一个变化，与如何ngModel通过比较value属性 in来匹配所选选项有关<option value="0">- 它现在需要显式使用字符串进行匹配，而不是允许使用整数。

事实上，文档清楚地指出：

select不使用的指令的值ngOptions始终是字符串。当模型需要绑定到非字符串值时，您必须使用指令显式转换它...或使用ngOptions指定选项集。

要解决此问题，请将 的初始化值更改为$scope.curProjID字符串：

$scope.curProjID = "0"; // 而不是 $scope.curProjID = 0;

当没有匹配项时（并且没有，除非您分配一个 string "0"），select添加一个“未知”选项：<option value="? number:0 ?"></option>.

于 2015-06-02T19:56:20.413 回答
5

还有另一种方法：使用实现解析器和格式化程序的指令。见http://plnkr.co/edit/JZPay8jgm5AXKGXDCjSb

谢谢纳雷茨！

伪代码：

<select convert-number ng-model="x">
   <option value="100">100</option>
   <option value="200">200</option>
</select>


app.directive('convertNumber', function() {
  return {
    require: 'ngModel',
    link: function(scope, el, attr, ctrl) {
      ctrl.$parsers.push(function(value) {
        return parseInt(value, 10);
      });

      ctrl.$formatters.push(function(value) {
        return value.toString();
      });      
    }
  }
});
于 2015-06-09T12:04:50.010 回答
2

我遇到过同样的问题。我没有确保我的 JavaScript 代码在所有地方都使用字符串，而是执行了以下操作：

<option ...>从 HTML 文件中删除了项目

在 JavaScript 中引入了一个列表，类似于：

var orderQuantities = [
        { id: 100, text: '100' },
        { id: 200, text: '200' },
        { id: 300, text: '300' },
];

确保 orderQuantities 在范围内可见

ng-option在标签中使用select如下：

<select ng-model="vm.entity.OrderQuantity" ng-options="orderQuantity.id as orderQuantity.text for orderQuantity in vm.orderQuantities"></select>
于 2015-06-08T16:49:15.330 回答
0 
<select ng-model="x">
   <option value="100">100</option>
   <option value="200">200</option>
</select>

scope.x = '200'

或阅读此文档。 https://docs.angularjs.org/guide/migration

于 2016-07-28T14:48:29.630 回答