选择下拉菜单一开始不能与AngularJS模型绑定。

21 浏览
0 Comments

选择下拉菜单一开始不能与AngularJS模型绑定。

我的问题是，我有一个简单的下拉选择框，并使用ng-repeat来填充下拉框，如下所示：\n

\n在选择选项之后，绑定到model.value的绑定正常工作，但在此之前，似乎不会将所选的下拉选项绑定到value模型最初设置的值。\n下面是一个示例：\n



  
    
  
  
  
    {{tstCtrl.model.value}}

\n我认为上面的代码片段非常清楚，但我很乐意回答任何问题。\n我该如何解决这个问题？\n谢谢

0

3 答案

0 Comments

问题：在从AngularJS 1.3.x升级到1.4时，ng-model和select下拉列表存在问题。

原因：Angular文档进行了更新，并提供了更合适的修复方法。

解决方法：

1. 创建一个指令convertToNumber，该指令用于将字符串转换为数字。

app.directive('convertToNumber', function() {
    return {
        require: 'ngModel',
        link: function (scope, element, attrs, ngModel) {                
            ngModel.$parsers.push(function(val) {                    
                return parseInt(val, 10);
            });
            ngModel.$formatters.push(function (val) {                    
                return '' + val;
            });
        }
    };
});

2. 在select下拉列表中添加指令convert-to-number。

<select ng-model="tstCtrl.model.value" convert-to-number required>
  <option ng-repeat="option in tstCtrl.myOptions" value="{{option.a}}">{{option.b}}</option>
</select>

参考链接：

http://weblog.west-wind.com/posts/2015/May/21/Angular-Select-List-Value-not-binding-with-Static-Values

0
0 Comments

问题的原因是select dropdown没有初始绑定到AngularJS模型。解决方法是使用ng-options替代ng-repeat来绑定select dropdown到AngularJS模型。以下是使用ng-options的代码示例：

其中，tstCtrl.model.value是AngularJS模型的属性，tstCtrl.myOptions是一个数组，包含了select dropdown的选项。使用ng-options的优点是代码更加简洁易读，不会让非Angular开发人员感到困惑。

0
0 Comments

在AngularJS中，有时候会遇到select下拉菜单初始时不会与模型绑定的问题。通常，这是因为使用了ng-repeat指令而不是ng-options指令。解决这个问题的方法是使用ng-options指令，并采用特定的语法来显示属性并绑定到其他属性。具体的解决方法如下：



  
    
  
  
  
    {{model.value}}

以上是修复了问题的代码片段。通过使用ng-options指令并采用特定的语法，我们可以将属性a显示为选项的文本，同时将属性b绑定到模型的value属性。这样，select下拉菜单在初始时就会与模型绑定。

0