如何使用AngularJS for Ionic在网页上更改所选选项？

18 浏览
0 Comments

如何使用AngularJS for Ionic在网页上更改所选选项？

我的目的是制作一个下拉选择框，其中包含0到9位数字的选项。我实际上正在将4个这样的模块组合在一起运行计算。现在，在用户意外选择无法发送到后端的选项后，我遇到了问题，即如何将这4个选择重置为默认状态。

我有一个使用Angular的简单选择代码，现在我可以毫无问题地通过$scope.q8_1_selected获取q8_1_selected的值，然而当我设置值为$scope.q8_1_selected = 1;时，选中的选项在网页上没有更新。出了什么问题？

q8_digit_array是一个[0..9]的数字数组。

我尝试了以下代码来替换{{item1}}：

但是在$scope.q8_1_selected = 1;之后，它仍然没有在网页上改变任何内容。删除ng-init后，仍然不起作用。

更新：

只是网页没有更新。

也许我应该展示整个情况，我实际上正在使用Ionic，它使用AngularJS来进行所有绑定。

js：

//更改函数，我有总共4个类似这样的函数。

$scope.q8_select_digit_1 = function(digit){

$scope.q8_1_selected = parseInt(digit) ;

q8_update_answer() ;

}

//每次必须计算答案

var q8_update_answer = function(){

var n1 = $scope.q8_1_selected * 10 + $scope.q8_2_selected ;

var n2 = $scope.q8_3_selected * 10 + $scope.q8_4_selected ;

//！！！----问题发生在这里，对$scope.q8_1_selected等的以下更改有时起作用，但大多数情况下，不会更新网页----！！！

//然而，$scope.q8_1_selected等的值是正确的。数据在JS端绑定。

if (n1 == 0){

$scope.q8_1_selected = 0 ;

$scope.q8_2_selected = 1 ;

}

else if (n2 == 0){

$scope.q8_3_selected = $scope.q8_1_selected ;

$scope.q8_4_selected = $scope.q8_2_selected ;

}

else if (n2 < n1){

$scope.q8_3_selected = $scope.q8_1_selected ;

$scope.q8_4_selected = $scope.q8_2_selected ;

}

n1 = $scope.q8_1_selected * 10 + $scope.q8_2_selected ;

n2 = $scope.q8_3_selected * 10 + $scope.q8_4_selected ;

$rootScope.answerData[$scope.whichQuestion-1] = [n1,n2] ;

}

0

3 答案

0 Comments

问题的原因是在AngularJS中，ng-model指令需要使用点符号来创建一个对象属性，以实现双向绑定。在这个例子中，代码中的ng-model指令没有使用点符号，导致选项无法正确选择。

解决方法是在ng-model指令中添加点符号来创建一个对象属性。在这个例子中，将ng-model指令改为ng-model="q8_s_obj.q8_3_selected"即可解决问题。

同时，还需要在ng-change指令中添加一个函数来更新选项的值。在这个例子中，添加了一个名为q8_select_digit_3的函数，该函数将选项的值转换为整数，并调用q8_update_answer函数来更新答案。

最后，需要创建一个名为q8_update_answer的函数来更新答案。该函数根据选项的值进行判断并更新答案数据。

通过以上的修改，就可以实现在web页面中更改选中的选项了。

0
0 Comments

问题出现的原因是ng-model的值没有绑定到网页上，解决方法是使用$apply()方法强制AngularJS应用更改并在视图上显示。下面是解决问题的代码：

在HTML中添加ng-change指令：

在控制器中初始化ng-model的值：

$scope.q8_1_selected = $scope.q8_digit_array[1];

在控制器中使用$apply()方法：

$scope.$apply();

0
0 Comments

问题的原因是在AngularJS和Ionic中如何更改网页中选择的选项。解决方法是在HTML中使用ng-model和ng-change指令来绑定选择的选项，并使用ng-options指令来设置选项列表。同时，可以使用ng-true-value和ng-false-value来设置选项的值。在JavaScript中，可以通过改变$scope.q8_1_selected的值来改变选项的选择。此外，还可以在函数中使用$scope.$apply()来更新视图。

下面是解决问题的代码示例：

HTML代码：

JavaScript代码：

$scope.q8_1_selected = 'YES'; // 选中
$scope.q8_1_selected = 'NO'; // 未选中
// 更改函数
$scope.q8_select_digit_1 = function(){
    $scope.q8_1_selected = parseInt($scope.q8_1_selected);
    q8_update_answer();
}
// 更新答案
var q8_update_answer = function(){
    var n1 = $scope.q8_1_selected * 10 + $scope.q8_2_selected;
    var n2 = $scope.q8_3_selected * 10 + $scope.q8_4_selected;
    
    if (n1 == 0){
        $scope.q8_1_selected = 0;
        $scope.q8_2_selected = 1;
    }
    else if (n2 == 0){
        $scope.q8_3_selected = $scope.q8_1_selected;
        $scope.q8_4_selected = $scope.q8_2_selected;
    }
    else if (n2 < n1){
        $scope.q8_3_selected = $scope.q8_1_selected;
        $scope.q8_4_selected = $scope.q8_2_selected;
    }
    
    n1 = $scope.q8_1_selected * 10 + $scope.q8_2_selected;
    n2 = $scope.q8_3_selected * 10 + $scope.q8_4_selected;
    
    $rootScope.answerData[$scope.whichQuestion-1] = [n1,n2];
    $scope.$apply();
}

希望对你有帮助！

0