Question

我昨天正在学习Angular并做一个简单的演示。

这是我的选择组：

<select class="form-control" size="5">
       <option ng-repeat="m in duringList" ng-bind="m" ng-selected="user.m"></option>
</select>

这是保存按钮：

<button type="button" class="btn btn-success btn-lg btn-block" ng-click="save()">Save</button>

在控制器中：

$scope.save =function () {

    console.log($scope.user.m);
}

我试试但是未定义。

我只是期望当我选择一个选项并单击保存按钮时，我可以在不使用Jquery的情况下获取选项中的值。所以请帮忙~~非常感谢。

Answer 1

使用ng-options并将选择绑定到user.m。

<select ng-model="user.m" ng-options="m for m in duringList"></select>

如果要设置默认选择，只需将user.m设置为适当的值即可。例如，在您的控制器中

$scope.user.m = $scope.user.m || $scope.duringList[0];

Plunker

Answer 2

最好使用ng-options并将模型绑定到select

function ctrl($scope) {
    
    $scope.duringList =  [
        {'v': 1, 't': '1'},
        {'v': 2, 't': '2'},
        {'v': 3, 't': '3'},
        {'v': 4, 't': '4'}
    ];
    
    $scope.save = function(){
        alert($scope.selectedValue);    
    };
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
  <div ng-controller="ctrl">
    <select ng-model="selectedValue" ng-options="o.v as o.t for o in duringList">
    </select>

    <button type="button" class="btn btn-success btn-lg btn-block" ng-click="save()">Save</button>

  </div>
</div>

Answer 3

或者@Phill除了你可以使用：

<select ng-model="user.m" class="form-control">
    <option ng-repeat="m in duringList">{{ m }}</option>
</select>

然后在控制器中：

$scope.save =function () {
    console.log($scope.user.m);
}

在Angular中：如何通过ng-selected获得“选定”选项

3 个答案: