angularjs ng-model和ng-select奇怪的行为

Question

我有一个人物列表，我想绑定到一个选择元素。

控制器实施：

// Person controller
function PersonCtrl($scope) {
    $scope.persons = [{id: 1, name: 'alex'}, {id: 2, name: 'jhon'}];
    $scope.selectedPerson = {id: 2, name: 'jhon'};  
}

Html标记：

 <select ng-model="selectedPerson" ng-options="p.name for p in persons"></select>

问题在于绑定似乎只能从HTML到范围，而不是相反。如果我从下拉列表中选择一个项目，它将正确更新$ scope.selectedPerson。但是，如果我最初将$ scope.selectedPerson变量的值设置为人员列表中的一个对象，则该值将不会反映在选择控件上。

我也有小提琴，可以准确显示问题所在：http://jsfiddle.net/nE3gt/

提前谢谢！

Answer 1

将其设置为您要绑定到的数组的索引：

$scope.selectedPerson = $scope.persons[0];

演示：http://jsfiddle.net/nE3gt/3/

Answer 2

您需要将selectedPerson设置为persons数组中的元素，而不是新对象 - 否则Angular不会知道它们是同一个东西。

// Person controller
function PersonCtrl($scope) {

$scope.persons = [{id: 1, name: 'alexx'}, {id: 2, name: 'jhon'}];

$scope.selectedPerson = $scope.persons[1];

$scope.submit = function () {
    //console.log(JSON.stringify($scope.Person));
    $("#obj").text(JSON.stringify($scope.Person));
};

}

更新了小提琴：http://jsfiddle.net/nE3gt/2/

修改

如果我正确理解你，你想要沿着这些方向做点什么：

// Person controller
function PersonCtrl($scope) {

    //serverData is the result of some http request...
    var serverData = {persons: [{id: 1, name: 'alexx'}, {id: 2, name: 'jhon'}], selectedPerson: {id: 2, name: 'jhon'}};

    $scope.persons = serverData.persons;
    $scope.selectedPerson = null;

    //find obj in persons that equals selectedPerson
    for(var i = 0, l = serverData.persons.length; i < l; i++)
    {
        if(serverData.persons[i].id === serverData.selectedPerson.id)
        {
            $scope.selectedPerson = serverData.persons[i];
        }
    }

    $scope.submit = function () {
        //console.log(JSON.stringify($scope.Person));
        $("#obj").text(JSON.stringify($scope.Person));
    };
};

即使您的数据作为不同的对象返回，您也需要确保将selectedPerson设置为人员阵列中的项目。

新小提琴：http://jsfiddle.net/nE3gt/4/