angularjs - $scope 没有在选择元素中获取 ng-model 值

Question

我正在尝试向从 ng-model 接收它的变量添加一个值。

这是HTML：

<div ng-form="amountForm" class="form-group" id="inputField">
    <input value="1" type="number" placeholder="1" ng-model="itemAmount" ng-maxlength="2" required>
</div>
<div ng-form="nameForm" class="form-group">
    <input value="" type="text" placeholder="Name of Item" ng-model="itemName" ng-maxlength="10" required>
</div>
<select ng-model="currentDependent">
    <option ng-repeat="item in items" value="{{item.dependentOn}}" ng-selected="currentDependent == item.dependentOn">{{item.name}}</option>
</select>

这是 Angular（$scope.itemAmount 和 $scope.itemName 有效）：

$scope.items = [];

$scope.addItem = function () {
    console.log($scope.itemAmount + ", " + $scope.itemName + ", " + $scope.currentDependent);

    $scope.items.push({
        amount: $scope.itemAmount,
        name: $scope.itemName,
        showMe: false,
        dependentOn: $scope.currentDependent
    });
};

控制台上似乎没有打印任何内容：

所以唯一不起作用的是Select中的ng-model。下拉列表显示正确的值。如何获取下拉列表中选择的值以在控制台中打印？

注意：为了清楚起见，我省略了 http.post 代码。

Answer 1

您应该使用 itemName（或其他项目属性）来跟踪依赖关系。

<select ng-model="currentDependent">
    <option ng-repeat="item in items" value="{{item.name}}">{{item.name}}</option>
</select>

Answer 2

我最近不得不在我的一个项目中使用下拉菜单，这就是我个人的做法

http://jsfiddle.net/halirgb/Lvc0u55v/

不要忘记打开控制台查看值！

起初，我认为只考虑ng-repeat我的选择是个好主意。但后来我发现ng-options当你掌握它的窍门时使用会更方便。

这个SO question 很好地解释了它！