AngularJS 1.4:使用$ compile插入列表时,选择列表值不能正确初始化

Question

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

我页面的一部分显示了2个选择列表(项目和子项目).两者都应默认为"(选择______)",我将其列为每个选择的第一个选项,其中"值"为0.适当的ng模型变量初始化为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的更新,但我无法找到解决问题的方法.任何帮助将不胜感激.

Answer 1

ngModel通过比较value属性,1.4似乎与所选选项的匹配方式有关<option value="0">- 它现在需要显式使用字符串来匹配,而不是允许整数.

事实上,文件明确指出:

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

要修复,请将初始化值更改$scope.curProjID为字符串:

$scope.curProjID = "0"; // instead of $scope.curProjID = 0;

如果没有匹配(除非您指定了字符串"0",则没有匹配),select添加"未知"选项:<option value="? number:0 ?"></option>.

Answer 2

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

谢谢你去找narretz!

伪代码:

<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();
      });      
    }
  }
});