2016-08-18 103 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

相关问题