在Angularjs中使用ng-options时如何更新ng-model？

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不会获得用户选择的选项的值。我花了很多时间，但仍然无法找出原因。

- Besa

---

运行正常：http://plnkr.co/edit/5IHYM086JgMzlPdFfACo?p=preview - dfsq

http://jsfiddle.net/HB7LU/11190/ - Naeem Shaikh

你可以使用 params: { 'period': $scope.period }。 - JiniKJohny

当我在控制台中使用console.log($scope.period)时，我得到了undefined。我看到它在plnkr上获得了值。但是函数部分可能存在问题。为什么$scope.period是未定义的？ - Besa

Answer 1

在我的情况下，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"。

- Mari

Answer 2

• 在angularjs文档中的选择指令中有一个注释：
  • "注意：ngModel按引用比较，而不是值。当绑定对象数组时，这一点很重要。在这个jsfiddle中看一个例子。"
• 这里是与您相同解决方案的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>

- amitthk

---

好的，我现在明白了，并且我将调用更改为以下内容： $scope.Search = function () { return $http({ url: '/api/ranks/get', method: 'GET', params: { period: $scope.period.value } }).then(function(response) {}, function(reason) { alert(reason); });};但是$scope.period仍然未定义？！ - Besa

我认为你不应该更改那个部分。请阅读我上面的注释。更新您的选择器的ng-options。使用ng-options="item as item.text for item in periodOptions"。如果您可以发布一些关于您尝试实现的更多代码，那么我们可能会有更多的想法。请使用上面的代码片段并让我知道。更新您的*ng-options*。 - amitthk

你写的方法是可以工作的。但我的问题在于我有一个嵌套的范围。因此，我创建了另一个作用域，并将其与其余的过滤选项一起放置在其中，并且现在它可以工作了。我会接受你的答案，因为它在 plnkr 上可以工作，并且我还有其他需要修复的代码。 - Besa

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>

- Nitu Bansal

Answer 4

选择和ngOptions的代码是正确的。但我认为您希望在每次选项更改时调用$scope.Search函数。在这种情况下，您需要设置ngChange处理程序：

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

- dfsq

---

我实际上有一个搜索按钮，但当我按下它时，它会到达 params: { period: $scope.period.value } }). 但它说$scope.period未定义。 - Besa

听起来你有嵌套作用域。是 ngInclude 或 ngIf 指令吗？如果是的话，在最顶层的作用域中设置初始值应该会有帮助。在你的控制器中添加 $scope.period = ''。 - dfsq

是的，我有一个嵌套作用域。我已经修复了它。 - Besa