根據$ scope設置下拉列表匹配

我有一個表格，使用ng-repeat顯示兩列。

第一列是從一個來源提取的項目列表。

第二列是從第二個列表中拉出的select元素。

我想要做的就是在下拉菜單中自動選擇一個選項，如果它匹配左列中顯示的內容。

我把一個小提琴：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']; 


}])

不是真的知道從哪裏開始在這...

來源

2015-10-19 crowsfeet

首先，你的語法是這裏的各種錯誤。你有一個字符串數組，但是你用'（key，value）'使用'ng-repeat'，這是沒有意義的，因爲它們不是對象，也沒有鍵或值。其次，由於這些下拉列表是在ng-repeat中，所以每個都有自己的範圍，並且由於您使用的是原始字符串，因此您將會遇到原型繼承問題。 – Claies

也值得一提，在select中使用'ng-options'而不是'ng-repeat'通常會更好。總而言之，這個代碼需要一個完整的重寫，在語言上是正確的，然後才能設置完成你所要求的。 – Claies

謝謝克萊爾。這只是一個快速的模擬，因爲我實際上是爲列表拉取JSON對象。 – crowsfeet

擴展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>

來源

2015-10-19 22:35:05

謝謝，dboskovic。我會試試看，並會告訴你它是如何發生的。 – crowsfeet

根據$ scope設置下拉列表匹配

回答

相關問題