Question

我遇到了一些奇怪的事情，这个例子在codepen中有效但在我的Ionic应用程序中不起作用。

当我更改select标签中的选项时，我想显示所选的值，但它不起作用，它会显示undefined，我已经尝试了很多方法。

这不是原始代码，原始代码从外部API检索值并使用ngOptions填充选项（有效，填充正常）。但它不会更新控制器中的值。

所以我决定让它变得更简单，但它仍然无效：

HTML

<select ng-model="optionSelected" ng-change="selectUpdated()">
    <option value="">Select an option</option>
    <option value="h">Hello</option>
    <option value="b">Bye</option>
</select>

JAVASCRIPT

$scope.selectUpdated = function() {
    console.log('Updated');
    console.log($scope.optionSelected);
};

我认为不需要更多代码，HTML包含在ion-view和ion-content中。没有显示错误，只显示“已更新”输出和undefined。

更改选项时，我得到undefined。但是codepen中的相同代码工作得很好.. http://codepen.io/anon/pen/YXvYmq

有人能告诉我触发这种奇怪行为会发生什么事吗？

提前致谢。

Answer 1

找到解决方案，将ngModel属性作为参数传递给ngChange。

<强> HTML

<select ng-model="optionSelected" ng-change="selectUpdated(optionSelected)">
    <option value="">Select an option</option>
    <option value="h">Hello</option>
    <option value="b">Bye</option>
</select>

<强> JS

$scope.selectUpdated = function(optionSelected) {
    console.log('Updated');
    console.log(optionSelected);
};

Answer 2

我今天遇到了同样的问题，不得不创建一个解决方法来正常使用选择。

的javascript

$scope.updatePreferredLanguageValue = function() {
   $scope.PreferredLanguage = this.PreferredLanguage;
};

HTML

<select ng-model="PreferredLanguage" ng-options="Language.id as Language.name for Language in LanguageList" id="LanguageListSelect" name="LanguageListSelect" ng-change="updatePreferredLanguageValue()">
</select>

所以基本上我有一个方法，当值被更改时调用，以确保在$ scope变量上设置更改。不漂亮，但它有效。

Answer 3

尝试在ng-model中使用$ parent并从控制器中调用它。

示例

<select ng-model="$parent.selectedCar"> <option>...</option> </select>

参考：https://github.com/angular/angular.js/wiki/Understanding-Scopes

select，ng-model中奇怪的行为离子不会更新

3 个答案: