2016-08-18 42 views
1

我在幫助ng-repeat的頁面上呈現表單,此表單的數據來自請求中的動態數據。在這個數據中,我嵌套了數組 - 類別。在這個數組裏面定義了id和這個id的列表,我可以在我的表單中看到。從另一個請求中,我得到另一個數組,其中定義了ids的名稱。我怎樣才能從一個變量分配鍵值從另一個變量的名稱顯示在頁面名單上而不是ID列表如何將鍵從一個變量分配到另一個角度的值

這是plunker與我的問題。感謝任何幫助,提前致謝。

HTML我形式

<form style="padding: 15px" ng-submit="submitForm(rowData)"> 
      <div class="form-group row"> 
      <div ng-repeat="(key, value) in rowData"> 
      <div ng-if="key | id"> 
       <label class="col-sm-6">{{key | makeUppercase}}</label> 
       <div class=" col-sm-6"> 
       <input class="form-control rowValue" 
         id="rowData[key]" 
         ng-if="!isObject(value)" 
         type="text" 
         ng-model="rowData[key]" 
                /> 
       <span 
        class="form-control rowValue" 
        id="categories" 
        ng-if="isObject(value) && key == 'categories'" 
        ng-model="rowData.categories"> 
         {{rowData.categories}} 
       </span> 
       </div> 
       </div> 
      </div> 
      </div> 
       <div class="pull-right"> 
     <button type="submit" class="btn btn-default" 
       ng-if="rowData">Save</button> 
     <button type="button" class="btn btn-default" ng-if="rowData" 
       ng-click="cancelForm()">Cancel</button> 
      </div> 
     </form> 
+0

請,你想要做什麼? –

+0

爲什麼你不嘗試類似於ui-select插件:https://github.com/angular-ui/ui-select –

+0

@AbdelrhmanMohamed我想從其他角度來看「[3,5,7]」值變量像'[Category 5,Category 1,Category 6]' – antonyboom

回答

2

我的實現是很幼稚的,但它顯示你想要什麼。 我這個功能添加到您的控制器

$scope.getCategoryIns = function(ids){ 
    var categoriesName = []; 
    for (var j = 0; j < ids.length; j ++){ 
    id = ids[j]; 
    for(var i= 0; i < $scope.categories.length;i++) 
    { 
     if ($scope.categories[i].id == id){ 
     categoriesName.push($scope.categories[i].name); 
     } 
    } 
} 

    var str = categoriesName.join(', '); 
    return str; 
} 

,並在HTML中使用此功能如下

<span class="form-control rowValue" id="categories" ng-if="isObject(value) && key == 'categories'" ng-model="rowData.categories"> 
         {{getCategoryIns(rowData.categories)}}</span> 

plnkr here

+0

非常感謝!這正是我所期待的! – antonyboom

1

您可以創建在您的控制器的新方法,該數字映射在$scope.rowData.categories$scope.categories.id並返回相應類別名稱的值:

$scope.getCategoryName = function (categoriesArr) { 
    return categoriesArr.map(function(curr) { 
     return $scope.categories.filter(function(el){ 
      return el.id === curr; //filter out the appropriate category by id 
     })[0].name; //select the item and grab its name property 
    }) 
} 

和更新HTML以使用新的方法:

<span> 
    class="form-control rowValue" 
    id="categories" 
    ng-if="isObject(value) && key == 'categories'" 
    ng-model="rowData.categories"> 
    {{getCategoryName(rowData.categories)}} 
</span> 
+0

謝謝你,我感謝你的幫助! – antonyboom

相關問題