如何使用选定的对象值将此ng-option设置为init?

时间:2014-09-06 13:22:48

标签: angularjs ng-options

我尝试使用选定的预定义选项启动此选择。但我需要使用像我在代码中看到的对象作为值。我需要在data.selected中获取一个id。

的index.html

<div ng-controller="MyCtrl">{{data|json}}
        <select ng-model="data.selected" 
            ng-options="p.id.another group by p.id.proxyType for p in proxyOptions" >
        </select>
</div>

app.js

var myApp = angular.module('myApp', []);

function MyCtrl($scope) {
    $scope.proxyOptions = [{
        id: { proxyType: 'None', another: 1 }
    }, {
        id: { proxyType: 'Manual', another: 2 }
    }, {
        id: { proxyType: 'Automatic', another: 3 }
    }];

    $scope.data = {};
    $scope.data.selected = $scope.proxyOptions[0].id; }

小提琴

http://jsfiddle.net/fh01qndt/2/

基于Darren评论的新小提琴

http://jsfiddle.net/fh01qndt/5/

它有效,但我仍然需要以这种方式指定所选的选项:

    $scope.data.selected = {proxyType: 'Manual', another: 2};

3 个答案:

答案 0 :(得分:2)

请改用$scope.data.selected = $scope.proxyOptions[0]。您的方法是创建另一个与代理选项不同的对象。

您刚刚更改了问题代码...请不要这样做。

从你的任务中删除.id - ng-model将是整个选项对象而不仅仅是Id

这是您的确切小提琴,但从您的作业中删除.idJSFiddle

<强>更新

好的,所以再次查看你的代码我试图理解你想要实现的目标 - 我也注意到我误读了关于id的原始JSON对象 - 抱歉;我看到id并假设它被称为&#34;一个id&#34;而不是一个对象..

但是,我认为您尝试做的是在代码中设置所选的选项,因此您需要搜索列表并找到匹配项,不是吗?

如果是这样,那么这个小提琴显示ng-init()调用一个函数来做到这一点。

对你有好处吗? Another Fiddle, using ng-init

答案 1 :(得分:0)

如果你只需要请检查一下

$scope.proxyOptions = {
    '1': 'None',
    '2': 'Manual',
    '3': 'Automatic'
};

$scope.data.selected = '1';

<select ng-model="data.selected" ng-options="key as value for (key , value) in proxyOptions" >
</select>

答案 2 :(得分:0)

这样做:

var myApp = angular.module('myApp', []);

function DataController($scope) {
    $scope.proxyOptions = [{
        id: { proxyType: 'None', another: 1 }
    }, {
        id: { proxyType: 'Manual', another: 2 }
    }, {
        id: { proxyType: 'Automatic', another: 3 }
    }];
    $scope.data.selected=$scope.proxyOptions[0];
}

see jsfiddle