如何使用 AngularJS for Ionic 更改网页中的选定选项？

Posted 2023-02-22

【中文标题】如何使用 AngularJS for Ionic 更改网页中的选定选项？

【英文标题】：How to change the selected option in the web page using AngularJS for Ionic?

【发布时间】：2017-01-02 18:38:10

【问题描述】：

我的目的是使用 0 到 9 位数的选项进行下拉选择。我实际上将 4 个这样的模块组合在一起并运行计算。现在，在用户意外选择了无法发布到后端的选项后，我在将 4 个选择重置为默认状态时遇到了问题。

<select ng-init="q8_1_selected" ng-model="q8_1_selected" ng-change="q8_select_digit_1(q8_1_selected)" ng-options="item1 for item1 in q8_digit_array">
                        item1
</select>

我有这个使用 Angular 的简单选择代码，现在我可以使用 $scope.q8_1_selected 获得 q8_1_selected 值没有问题，但是当我设置值时

$scope.q8_1_selected = 1; 

这不会更新网页上的选定选项。怎么了？

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

刚试过，

<option ng-selected="item1 == q8_1_selected">item1</option>

替换 item1，但在 $scope.q8_1_selected = 1; 之后它仍然没有改变网页上的任何内容。删除 ng-init 后，仍然无法正常工作。

更新： 只是网页没有更新。

也许我应该展示整个画面，我实际上使用的是 Ionic，它使用 AngularJS 进行所有绑定。

 <select class="q8_select" ng-model="q8_1_selected" ng-change="q8_select_digit_1(q8_1_selected)" ng-options="item1 for item1 in q8_digit_array">
                        item1
 </select>

js,

//change function, I have total 4 like this one.
$scope.q8_select_digit_1 = function(digit)
        $scope.q8_1_selected = parseInt(digit) ;
        q8_update_answer() ;
      
//each time the answer must be calcluated
 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 ;

        //!!!!---- Problem happens here, the following changes on $scope.q8_1_selected etc. Sometimes working, but most of the time, not updating the web page ----!!!!
        //However the value of $scope.q8_1_selected and all others are correct. The data is binded, at the JS side. 

        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] ;


      

【问题讨论】：

q8_digit_array 中有哪些选项？尝试在$scope.q8_1_selected = array_value 中设置数组值之一，而不是$scope.q8_1_selected = 1;

q8_digit_array 是一个从 0 到 9 的数组，作为数字。

试试$scope.q8_1_selected = true;

为什么你有ng-init="q8_1_selected"？请尝试不使用它。

@Vineet，已删除，仍无法正常工作

【参考方案1】：

我很高兴我刚刚遇到了 AngularJS 中最重要的问题之一。请看这里'the always dot practice'。还有这个official document。而video presentation. 我要做的是在所有ng-model 指令中添加点。

所以数据模型必须改成，

 var q8_result = [0,1,0,1] ;

      $scope.q8_s_obj = 
        q8_1_selected: q8_result[0],
        q8_2_selected: q8_result[1],
        q8_3_selected: q8_result[2],
        q8_4_selected: q8_result[3]
       ;

还有html，

<select class="q8_select" ng-model="q8_s_obj.q8_3_selected" ng-change="q8_select_digit_3(q8_s_obj.q8_3_selected)" ng-options="item3 for item3 in q8_digit_array">        
     item3            
 </select>

ng-change，

$scope.q8_select_digit_3 = function(digit)   
  $scope.q8_s_obj.q8_3_selected = parseInt(digit) ;
  q8_update_answer() ;

最后是更新函数，

var q8_update_answer = function()
        var n1 = $scope.q8_s_obj.q8_1_selected * 10 + $scope.q8_s_obj.q8_2_selected ;
        var n2 = $scope.q8_s_obj.q8_3_selected * 10 + $scope.q8_s_obj.q8_4_selected ;

        if (n1 == 0)
          $scope.q8_s_obj.q8_1_selected = 0 ;
          $scope.q8_s_obj.q8_2_selected = 1 ;
        
        else if (n2 == 0)
          $scope.q8_s_obj.q8_3_selected = $scope.q8_s_obj.q8_1_selected ;
          $scope.q8_s_obj.q8_4_selected = $scope.q8_s_obj.q8_2_selected ;
        

        else if (n2 < n1)
          $scope.q8_s_obj.q8_3_selected = $scope.q8_s_obj.q8_1_selected ;
          $scope.q8_s_obj.q8_4_selected = $scope.q8_s_obj.q8_2_selected ;
        

        n1 = $scope.q8_s_obj.q8_1_selected * 10 + $scope.q8_s_obj.q8_2_selected ;
        n2 = $scope.q8_s_obj.q8_3_selected * 10 + $scope.q8_s_obj.q8_4_selected ;

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

        //$apply() will not work here, if it must be there, it can be the new evalAsync(), but it hasn't to be there, this is not need to be explicit.
        //$scope.$evalAsync() ;

   

【参考方案2】：

试试这个：

<select ng-model="q8_1_selected" ng-change="q8_select_digit_1(q8_1_selected)" ng-options="item1 for item1 in q8_digit_array"></select>

在控制器中

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

更新

我猜你不需要创建一个触发 onChange 的函数。每次值变化时，它会自动分配到q8_1_selected 模型中。如果您要进行操作，那么您可以引导用户$scope.q8_1_selected，它将包含选定的选项。我希望它可以帮助代码。 :)

【讨论】：

我认为你可能不对，如果我删除 ng-change，在我的情况下 q8_1_selected 不会更新

因为您也在同一型号上使用ng-init。

在上面的代码中，我已经删除了 ng-init。我的问题其实是ng-model的值是正确的，但是没有绑定到网页上。

有很多方法可以显示视图的变化。您可以通过ndDirective。在这种情况下，您可以强制告诉 angular 应用更改以显示在视图上。实际上，在您的情况下，角度不知道变量是否已更改。在这种情况下，您可以使用$scope.$apply()。如果它将在正在进行的过程之间使用，它会引发错误。让我知道您遇到了什么错误？

解决了，检查我自己的答案。谢谢！

【参考方案3】：

我写答案是为了避免评论泛滥。

这应该可行：

<select ng-init="q8_1_selected" ng-model="q8_1_selected" ng-change="q8_select_digit_1(q8_1_selected)" ng-options="item1 for item1 in q8_digit_array" ng-true-value="'YES'" ng-false-value="'NO'">
                        item1
</select>

然后：

$scope.q8_1_selected = 'YES'; // checked

$scope.q8_1_selected = 'NO'; // unchecked

你可以在ng-true-value="'YES'"和ng-false-value="'NO'"中放任何你想要的东西。

据我了解，根据您的需要，您可以使用 digit 代替。

编辑：

试试这个：

html

 <select class="q8_select" ng-model="q8_1_selected" ng-change="q8_select_digit_1()" ng-options="item1 for item1 in q8_digit_array">
                        item1
 </select>

js

//change function
    $scope.q8_select_digit_1 = function()
      $scope.q8_1_selected = parseInt($scope.q8_1_selected) ;
      q8_update_answer() ;
    
    //each time the answer must be calcluated
    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 ;

      //!!!!---- Problem happens here, the following changes on $scope.q8_1_selected etc. Sometimes working, but most of the time, not updating the web page ----!!!!
      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()

    

不确定，但如果仍然无法正常工作，可能是由于一些异步问题...

希望对您有所帮助。 :)

【讨论】：

我在选项中有 10 个数字值，我很困惑“是”或“否”在我的情况下会起作用吗？

@tomriddle_1234 是的，应该。在您的 ng-change 函数 q8_select_digit_1(q8_1_selected) 中，您在某处设置“是”或“否”值来选择或不选择该选项。也许您也可以尝试将$scope.$apply() 更新到视图上，但据我所知，这不是必需的..

我更新了我的代码，非常感谢，但我还是一头雾水。

我有个主意，***.com/questions/35506864/…。

解决了，检查我自己的答案。谢谢！