Question

我正在尝试获取已经选择了预定义值的列表。但是它始终只显示第一个结果。这是我的脚本

    $scope.names=[
        {name:'Henry',age:'20'},
        {name:'John',age:'21'},
        {name:'Mark',age:'22'},
        {name:'Will',age:'23'}
    ];

    $scope.dat=[
        {id:'1',dats:'qwe',namer:'Henry'},
        {id:'1',dats:'ads',namer:'Will'},
        {id:'1',dats:'zxc',namer:'John'},
        {id:'1',dats:'pqr',namer:'Mark'},
        {id:'1',dats:'jgh',namer:'Will'},
        {id:'1',dats:'mnb',namer:'Mark'},
        {id:'1',dats:'tyu',namer:'John'},
        {id:'1',dats:'dfg',namer:'Henry'},
        {id:'1',dats:'vcx',namer:'Will'},
        {id:'1',dats:'lmt',namer:'John'},
    ]

dat是要显示的数据，其中已经选择了预定义名称.names包含所有名称列表。

这是我的HTML代码

<div ng-repeat="t in dat">
    <div style='float:left;width:100%;'>
        <div>{{t.dats}}</div>
        <select ng-model="t.namer">
            <option value="{{x.name}}" ng-repeat="x in names">{{x.name}}</option>
        </select>
    </div>
</div>

它只为所有条目选择亨利。但模型值保持正确。任何想法

Answer 1

您需要使用ng-options代替ng-repeat来设置选择选项：

<select ng-model="t.namer" ng-options="[expression]" />

现在，使用字符串作为索引值确实不能很好地工作。我建议你在数据模型中改变一些事情：

$scope.names = [
    {id: 1, name: 'Henry', age: 20},
    {id: 2, name: 'John', age: 21},
    // etc...
];

$scope.dat = [
    {id: 0, dats: 'qwe', namer: 1},
    {id: 1, dats: 'ads', namer: 4},
    // etc...
];

首先，namer中的$scope.dat应该是对名称id的引用。这可以防止重复数据。另外，id不应该是字符串。

现在，如果您将该数据与ng-options：

组合在一起

<select ng-model="t.namer" ng-options="x.id as x.name for x in names" />
<!--              These are the options' ^ Key,  ^ value  ^ entry ^ array -->

你将this working example：

function Main($scope) {
    $scope.names = [
        {id: 1, name: 'Henry', age: 20},
        {id: 2, name: 'John', age: 21},
        {id: 3, name: 'Mark', age: 22},
        {id: 4, name: 'Will', age: 23}
    ];

    $scope.dat = [
        {id: 0, dats: 'qwe', namer: 1},
        {id: 1, dats: 'ads', namer: 4},
        {id: 2, dats: 'zxc', namer: 2},
        {id: 3, dats: 'pqr', namer: 3},
        {id: 4, dats: 'jgh', namer: 4},
        {id: 5, dats: 'mnb', namer: 3},
        {id: 6, dats: 'tyu', namer: 2},
        {id: 7, dats: 'dfg', namer: 1},
        {id: 8, dats: 'vcx', namer: 4},
        {id: 9, dats: 'lmt', namer: 2},
    ];
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>

<div ng-controller="Main" ng-app>
    <div ng-repeat="t in dat">
        <div style='float:left;width:100%;'>
            <div>{{t.dats}}</div>
            <select ng-model="t.namer" ng-options="x.id as x.name for x in names" />
        </div>
    </div>
</div>

Answer 2

使用ng-options：

<div ng-repeat="t in dat">
    <div style='float:left;width:100%;'>
        <div>{{t.dats}}</div>
        <select ng-model="t.namer" ng-options="x.name for x in names">
        </select>
    </div>
</div>

有关ng-options的更多信息： https://docs.angularjs.org/api/ng/directive/select

编辑：抱歉，忘记选择x.name作为表达式。以下将有效。

<div ng-repeat="t in dat">
    <div style='float:left;width:100%;'>
        <div>{{t.dats}}</div>
        <select ng-model="t.namer" ng-options="x.name as x.name for x in names"></select>
    </div>
</div>

见这里：http://jsfiddle.net/JoeSham/HB7LU/8994/

Answer 3

<div ng-repeat="t in dat">
    <div style='float:left;width:100%;'>
        <div>{{t.dats}}</div>
        <select ng-model="t.namer" ng-options="x.name for x in names">
        </select>
    </div>
</div>

试试这个。

选择角度isnt按预期工作

3 个答案: