AngularJS 获取范围内的选定项目

Question

我正在使用 Ionic 和 AngularJS 开发应用程序。不知道如何获取所选选项的值

控制器

.controller('TestCtrl', function($scope, $options) {
    $scope.options = [
        { id: 0, label: '15', value: 15 },
        { id: 1, label: '30', value: 30 },
        { id: 2, label: '60', value: 60 }
    ]

    $scope.countSelector = $scope.options[0];

    $scope.changeCount = function(obj){
        obj = JSON.parse(obj);
        console.log(obj)
        console.log(countSelector)
        $options.set('productCountPerPageValue', obj.value);
        $options.set('productCountPerPage', obj.id);
    };
    ...
})

模板

<ion-list ng-controller="TestCtrl">

    <label class="item item-input item-select">
        <div class="input-label">
            {{countSelector}}
        </div>
        <select ng-model="countSelector" ng-change="changeCount('{{countSelector}}')" ng-options="opt as opt.label for opt in options">
        </select>
    </label>

</ion-list>

console.log(obj) 始终 return 先前选择的值

console.log(countSelector) 始终 return 默认值（如果已设置）或未定义

Answer 1

当您执行 select ng-model="countSelector" 时，您将 select 绑定到 $scope.countSelector

因此，在您的控制器中，如果您想访问您的 selected 值，请使用以下命令：

$scope.countSelector

编辑：

根据您的要求，您可能希望直接拥有 $scope.countSelector 中的值。为此，您可以将 ng-options 调整为以下内容：

ng-options="opt.id as opt.label for opt in options"

Answer 2

您正在将 countSelector 的字符串版本传递给您的 ng-change 函数。如果您查看 html，它看起来像这样：

<select ng-model="countSelector" 
                  ng-change="changeCount('{&quot;id&quot;:1,&quot;label&quot;:&quot;30&quot;,&quot;value&quot;:30}')" 
                  ng-options="opt as opt.label for opt in options" class="ng-valid ng-dirty">

从技术上讲，您可以通过不使用表达式将 countSelector 传递到您的函数中：

<select ng-model="countSelector" ng-change="changeCount(countSelector)" ng-options="opt as opt.label for opt in options">

http://jsfiddle.net/r2zgmgq1/

正如@Deblaton Jean-Philippe 的回答所解释的那样，您可以通过作用域访问它，所以它并不是真正需要的。

AngularJS 获取范围内的选定项目

AngularJS get selected item in scope

javascript

angularjs

ionic-framework