2015-10-30 120 views
1

我在使用選擇標籤上的ng選項時存在角度問題,其中默認選定元素應由ng中的「company」屬性確定元件。 看看這段代碼:與ng重複對象鏈接的角度ng選項對象

<tr data-ng-repeat="company in companies"> 
    <td><input data-ng-model="company.Name" value="{{company.Name}}" /></td> 
    <td> 
    <select data-ng-model="selectedSeller" data-ng-options="seller.Login for seller in sellers"> 
    </select> 
    </td> 
</tr> 

我可以用$ scope.selectedSeller = $ scope.companies設置所有的元素默認的元素[0]在控制範圍內,但我真正想要的,是設置選擇通過將賣家對象鏈接到公司對象來負責公司的任何人。 我需要通過下面的代碼來實現「isSelected」。

<tr data-ng-repeat="company in companies"> 
    <td><input data-ng-model="company.Name" value="{{company.Name}}" /></td> 
    <td> 
    <select data-ng-model="selectedSeller" isSelected="company.responsible == seller.id" data-ng-options="seller.Login for seller in sellers"> 
    </select> 
    </td> 
</tr> 

任何人都知道如何解決這個問題?

回答

1

Angular是數據驅動的,因此您只需指定模型並將ng-model連接到輸入。

所以,你只提供NG-模型,沒有價值,沒有 「isSelected」

請看下面的例子:http://jsbin.com/kiqazaxahe/edit?html,js,output

<table> 
    <tr ng-repeat="company in vm.companies"> 
    <td><input data-ng-model="company. 
    name"/></td> 
    <td> 
    <select data-ng-model="company.responsible" 
      data-ng-options="seller.id as seller.login for seller in vm.sellers"> 
    </select> 
    </td> 
</tr> 
    </table> 

    <h2>Json vm.companies</h2> 
    <pre>{{vm.companies | json}}</pre> 

您的信息可能是這樣的:

var StackController = function() { 
    this.companies = [ 
    { 
     name: 'company 1', 
     responsible : 1 
    }, 
    { 
     name: 'company 2', 
     responsible : 2 
    }, 
    { 
     name: 'company 3', 
    } 
    ]; 

    this.sellers = [ 
    { 
     login : 'pavel', 
     id : 1, 
    }, 
    { 
     login : 'petr', 
     id : 2, 
    }, 
    { 
     login : 'igor', 
     id : 3, 
    } 
    ]; 
}; 

angular.module('stackApp', []) 
    .controller('StackController', StackController); 

select的模型是連接到seller.id的company.seller,ng-options的語法可以確定什麼被用作標識符和什麼是標籤。

seller.id as seller.login for seller in vm.sellers 

還有一件事要補充,標識符可能不僅僅是id,而是整個對象。

+0

是的!這工作非常完美。謝謝:) –

+0

歡迎你,我也將欣賞+1並檢查正確:) –

+0

完成。我認爲... –

0

使用過濾器:

<select data-ng-model="selectedSeller" data-ng-options="seller.Login for seller in sellers" ng-init="selectedSeller = $filter('filter')($scope.company, {responsible: seller.id})[0]"> 
    </select> 

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

 
app.controller('StackController', function($scope) { 
 
    $scope.companies = [ 
 
     { 
 
      name: 'company 1', 
 
      responsible : 1 
 
     }, 
 
     { 
 
      name: 'company 2', 
 
      responsible : 2 
 
     }, 
 
     { 
 
      name: 'company 3', 
 
     } 
 
    ]; 
 
    
 
    $scope.sellers = [ 
 
     { 
 
      login : 'pavel', 
 
      id : 1, 
 
     }, 
 
     { 
 
      login : 'petr', 
 
      id : 2, 
 
     }, 
 
     { 
 
      login : 'igor', 
 
      id : 3, 
 
     } 
 
    ]; 
 
}).filter("filterSeller", function() { 
 
\t return function(sellers, company) { 
 
     var seller = {}; 
 
    
 
\t \t angular.forEach(sellers, function(item, j) { 
 
      if(company.responsible == item.id){ 
 
       seller = item; 
 
       return false; 
 
      } 
 
     }); 
 
     
 
     return seller.id; 
 
\t }; 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<table ng-app="stackApp" ng-controller="StackController"> 
 
    <tr ng-repeat="company in companies"> 
 
     <td><input ng-model="company.name"/></td> 
 
     <td> 
 
      <select ng-model="company.responsibleSelected" ng-options="seller.id as seller.login for seller in sellers" 
 
      ng-init="company.responsibleSelected = (sellers | filterSeller:company)"> 
 
      </select> 
 
     </td> 
 
     <td>{{company.responsibleSelected}}</td> 
 
    </tr> 
 
</table>

+0

這是錯的,selectedSeller是相同的爲迭代中的每個項目。選擇必須連接到公司的屬性。如果你想設置默認值,只需將其設置爲模型。 –

+0

對!我編輯我的示例 –

+0

已編輯?你幾乎弄糟了我的代碼:)你的代碼仍然很髒。您不需要迭代通過列表來進行威懾,如果它被選中並且不應該以這種方式來確定默認值。設置模型完全一樣,並且更加乾淨。 –