根据 $scope 匹配设置下拉菜单答案

【问题标题】：Set dropdown based on $scope match根据 $scope 匹配设置下拉菜单
【发布时间】：2016-01-18 09:14:41
【问题描述】：

我有一个使用 ng-repeat 显示两列的表格。

第一列是从一个来源中提取的项目列表。

第二列是从第二个列表中提取的选择元素。

我想要做的是自动在下拉列表中选择一个选项，如果它与左列中显示的内容匹配。

我整理了一个小提琴：https://jsfiddle.net/raz1j9rt/1/

这是我的 HTML：

<header>
    <title>myTittle</title>
</header>
<body ng-app='myApp' ng-controller='myController'>
    <div class="col-md-10 col-md-offset-1">
        <div>
            <form>
                <table class="table  table-striped">
                    <thead>
                        <th>From File</th>
                        <th>Map To</th>
                    </thead>
                    <tr class="selector-row" ng-repeat="(key,value) in List1">
                        <td><span id="myspan">{{value}}</span>

                        </td>
                        <td style="padding:10px;">
                            <select name="repeatSelect" id="repeatSelect" ng-model="data[value]" class="form-control">
                                <option ng-repeat="(key,value) in Match" value="{{value}}">{{value}}</option>
                            </select>
                        </td>
                    </tr>
                </table>
            </form>{{ data }}</div>
    </div>
</body>

这是我的 JS：

var app = angular.module('myApp', [])
app.controller('myController', ['$scope', function ($scope) {
    $scope.data = {};

    $scope.List1 = ['product1', 'product2', 'product3', 'product4', 'product5'];
    $scope.Match = ['product1', 'somethtingElse1', 'product3', 'somethingElse2', 'product5'];


}])

不确定从哪里开始...

【问题讨论】：

首先，你的语法在这里有各种各样的错误。你有一个字符串数组，但你使用ng-repeat 和(key,value)，这是没有意义的，因为它们不是对象，也没有键或值。其次，由于这些下拉菜单在 ng-repeat 中，每个下拉菜单都有自己的范围，并且由于您使用的是原始字符串，因此您将遇到原型继承问题。
另外值得一提的是，通常最好在选择中使用ng-options 而不是ng-repeat。总而言之，此代码需要完全重写才能在语义上正确，然后才能设置为执行您的要求。
谢谢克莱斯。这只是一个快速模拟，因为我实际上是在为列表提取 JSON 对象。
我尝试了ng-select、ng-change 等的几个快速组合，我认为与其期望$scope.data 由下拉列表设置，您可能应该填充@ 987654331@ 在控制器中，然后允许下拉菜单更改值（如果它不是默认值）。这似乎不是可以或应该在视图中实现的逻辑。
谢谢，克莱斯。感谢帮助。我会试试 dboskofic 发布的内容。

标签： angularjs forms angularjs-scope angularjs-ng-repeat html-select

【解决方案1】：

在 Claies 点上展开，这是一个有效的小提琴。

https://jsfiddle.net/dboskovic/raz1j9rt/2/

将此添加到您的控制器。

// setup default matches
angular.forEach($scope.List1, function(v){
    $scope.data[v] = $scope.Match.filter(function(d){
        if(d === v) return true;
        return false;
    })[0];
})

然后将您的选择更改为：

<select name="repeatSelect" id="repeatSelect" ng-model="data[value]" class="form-control" ng-options="x for x in Match"></select>

【讨论】：

谢谢，德博斯科维奇。我会试一试，然后告诉你进展如何。