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

Question

我的目的是使用 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 进行所有绑定(bind)。

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


      }

Answer 1

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

这应该有效:

<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'" .

根据你的需要，据我了解，你可以用数字代替。

编辑:

试试这个:

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

    }

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

希望对您有所帮助。 :)