Question

我有一个使用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'];


}])

不确定从哪里开始...

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

根据$ scope匹配

1 个答案: