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进行所有绑定。

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

    }

不确定，但如果它仍然不起作用，可能是由于某些异步问题......

希望它有所帮助。：）

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

<强>更新

我猜你不需要创建一个触发select onChange的函数。每次值更改时，它都会自动分配q8_1_selected模型。如果你要操纵，那么你可以指导用户$scope.q8_1_selected，它将包含所选的选项。我希望它可以帮助代码。：）

Answer 3

我很高兴我刚刚遇到了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() ;

   }

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

3 个答案: