Question

我的角度选择没有约束力。我可以告诉值是正确的，但是选择没有更新。如果值存在，为什么不绑定？

<div ng-controller="MyController" ng-app>
    <select class="form-control" ng-model="colorId"ng-options="color.id as color.name for color in colorList">
        <option value="">--Select a Color--</option>
    </select>
<input type="button" value="submit" ng-click="Select()"></input>

function MyController($scope) {
    $scope.colorList = [{
        id: '1',
        name: 'red'
    }, {
        id: '2',
        name: 'blue'
    }, {
        id: '3',
        name: 'green'
    }];

    var colorId = 3;
    $scope.colorId = colorId;
    alert($scope.colorId);

    $scope.Select = function () {
        var colorId = 2;
        $scope.colorId = colorId;
    }
}

这是一个小提琴：

http://jsfiddle.net/ky5F4/23/

Answer 1

执行选择

时，需要将id更改为字符串

$scope.Select = function () {
    console.log('select fired');
    var colorId = 1;
    $scope.mySelection.colorId = colorId + "";
}

http://jsfiddle.net/bxkwfo0s/2/

接下来你应该使用对象的属性而不仅仅是范围变量，这将确保正确的模型绑定

ng-model="mySelection.colorId"

对象可以是简单的

$scope.mySelection = {colorId : colorId };

Answer 2

您的代码有两个错误：

您在ng-options中使用colorList作为模型，但您在控制器中将其称为数据集。
您使用字符串作为id，但将$ scope.colorId设置为数字。

这是更新fiddle更改数字的数字并将$ scope.datasets更改为$ scope.colorList

function MyController($scope) {
    $scope.colorList = [{
        id: 1,
        name: 'red'
    }, {
        id: 2,
        name: 'blue'
    }, {
        id: 3,
        name: 'green'
    }];

    var colorId = 3;
    $scope.colorId = colorId;
    alert($scope.colorId);

    $scope.Select = function () {
        var colorId = 2;
        $scope.colorId = colorId;
    }
}

Answer 3

考虑将ng-model设为一个对象，特别是$ scope.colorList中已有的对象之一。如果你这样做，你应该能够避免你在点击处理程序中进行的后处理。

所以你的选择将如下所示：

<select class="form-control" ng-model="selectedColor" 
        ng-options="color.name for color in colorList"></select>

一个问题是，如果你的控制器中有一个看起来像你的红色对象的对象，比如$scope.selectedColorObj = { id : '1', name:'red' }并将select的ng-model设置为该选项，它将无效。 Angular会看到您将ng-model设置为实际上不在您的数据源中的对象，并添加了value="?"的额外选项，因此在这种情况下我使用$filter来获取匹配数组的成员：

 $scope.colorId = '3';
 $scope.selectedColor = $filter('filter')( $scope.colorList,{ id: $scope.colorId})[0];

请参阅http://jsfiddle.net/ky5F4/92/

角度选择不绑定到Ng模型

3 个答案: