如何在Angularjs中使用ng選項時更新ng模型？

Question

我不能讓我的模型在我選擇一個選項時進行更新。

這是我的觀點：

<select data-ng-model="period" ng-options="item.value as item.text for item in periodOptions"></select> 

在我controller.js我有以下幾點：

$scope.periodOptions = [ 
      { text: "This week", value: 'week' }, 
      { text:"This month", value: 'month '}, 
      { text:"This year", value: 'year' }, 
      { text:"All times", value: 'all-time '} 
     ]; 

$scope.Search = function() { 

      return $http({ 
       url: '/api/get', 
       method: 'GET', 
       params: { 
        period: $scope.period 
       } 
      }).then(function(response) { 
       console.log(response); 
      }, function(reason) { 
       alert(reason); 
      }); 
     }; 

的$ scope.period不採取選擇了該選項的值來自用戶。我花了很多時間在這方面，無法弄清楚爲什麼會發生這種情況。

Answer 1

• 有在angularjs documentation for select註釋。
  • 「注意：ngModel比較由參考，不重視這種結合到對象的數組時是很重要的查看示例在此的jsfiddle。」
• 相同的溶液和你的Here is the fiddle。

下面是一個應該工作的解決方案（注意對你現有的代碼使用ng-options="item as item.text ...而不是ng-options="item.value as item.text）的一個小改動。希望這可以幫助！

var myCtrl = function($scope){ 
 
    
 
    $scope.periodOptions = [ 
 
      { text: "This week", value: 'week' }, 
 
      { text:"This month", value: 'month '}, 
 
      { text:"This year", value: 'year' }, 
 
      { text:"All times", value: 'all-time '} 
 
     ]; 
 
    
 
$scope.Search = function() { 
 
alert('will call api with period: '+$scope.period.text); 
 
    /* 
 
      return $http({ 
 
       url: '/api/get', 
 
       method: 'GET', 
 
       params: { 
 
        period: $scope.period 
 
       } 
 
      }).then(function(response) { 
 
       console.log(response); 
 
      }, function(reason) { 
 
       alert(reason); 
 
      }); 
 
      */ 
 
     }; 
 
    
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app ng-controller="myCtrl"> 
 
<select data-ng-model="period" ng-options="item as item.text for item in periodOptions" ng-change="updatePeriod()"></select> 
 
    <div>{{period}} </div> 
 
    <button ng-click='Search()' >Search</button> 
 
    </div>

Answer 2

select和ngOptions的代碼是正確的。不過，我假設你想要$scope.Search函數在每個選項更改上被調用。在這種情況下，你需要設置ngChange處理程序：

<select ng-model="period" 
     ng-options="item.value as item.text for item in periodOptions" 
     ng-change="Search()"> 
</select> 

Answer 3

試試這個

<div ng-controller="MyCtrl"> 
    <select data-ng-model="period" ng-options="item.value as item.text for item in periodOptions"></select> 
    <span>period value=, {{period}}!</span> 
</div> 

Answer 4

在我的情況ng-model沒有更新，因爲我select是ng-if一個元素中。

<div class="editor-panel" ng-if="editorEnabled"> 
    ... 
    <select ng-options="item as item.description for item in items" ng-model="selectedItem"/> 
    ... 
</div> 

ng-if創建另一個範圍和ng-model指的是在這個孩子的範圍，而不是預期的變量的變量。

要解決這個問題，我改變了ng-model="selectedItem"價值ng-model="$parent.selectedItem