角度選擇不綁定到Ng模型

我的角度選擇不具有約束力。我可以告訴該值是正確的，但是選擇不會更新。如果價值在那裏，爲什麼不具約束力？角度選擇不綁定到Ng模型

<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/

來源

2014-12-04 Jeremy Wagner

見我的答案。您仍然在使用「1」，「2」，「3」作爲對象中的ID。您需要將$ scope.colorId設置爲'1'，'2'或'3'以使其綁定，或者您可以將每個id更新爲數字（即1，2，3）而不是字符串。 – Patrick 2014-12-04 19:34:21

你在做選擇的時候需要將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 };

來源

2014-12-04 19:29:17 SoluableNonagon

有您的代碼有兩個錯誤：

您正在使用colorList作爲您的模型ng-options，但是你在控制器中調用它的數據集。
您使用字符串作爲id，但將$ scope.colorId設置爲一個數字。

這裏是一個更新的fiddle改變ID，以數字和改變$ 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; 
    } 
}

來源

2014-12-04 19:29:20 Patrick

考慮對你的NG-模型是一個對象，尤其是對象之一已經在你的$ scope.colorList中。如果你這樣做，你應該能夠避免你在點擊處理器中進行的後處理。

所以你的選擇會是這樣的：

<選擇類= 「表單控制」 NG-模型= 「selectedColor」 NG選項= 「color.name在colorList顏色」 > < /選擇>

一個問題是，如果你的控制器中有一個對象看起來像你的紅色對象，就像$ scope.selectedColorObj = {id：'1'，name：'red'}並設置select的ng-模型，該選項，它不會工作。 Angular將會看到你正在將ng模型設置爲一個實際上不在數據源中的對象，並添加了value =「？」的額外選項，所以我在這種情況下使用$ filter來獲取匹配的成員數組：

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

見http://jsfiddle.net/ky5F4/92/

來源

2015-06-04 18:59:48

角度選擇不綁定到Ng模型

回答

相關問題