UI格按鈕

Question

所以我一直在努力與這個像2天，做什麼仍沒有頭緒......

首先我很新的角度和JavaScript這樣一般我寫的所有內容都可能（也可能）是非常錯誤的。

樣本數據：

{ 
    'title' : 'awesome title', 
    'date' : '19-05-2015', 
    'place' : 'nice place', 
    'person' : 'Juliet Peterson', 
    'status' : 'OK' 
} 

我需要的是，在現有的UI格，添加包含兩種 如果myData.person只包含一個persone列，這個人 如果myData.person是空的文字'沒有人' 如果myData.person包含多個人，點擊文本'選擇'將彈出一個列表供選擇。

我的問題是，我無法得到那個工作。 2個第一個案件工作正常，但我正在努力爲最後一個。

所以我的心臟去爲任何一個下拉列表或酥料餅的按鈕

這裏我們使用自舉是我當前的代碼：

HTML：

<div id="grid_post_id" ui-grid="gridPostOpts" ui-grid-edit class="grid"></div> 

JS：

$scope.choosePerson = function(a) { 
if (a.length == 0) { 
    return 'No person'; 
} else { 
    var split = a.split(','); 
    if (split.length > 1) { 
     var res = '<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="'; 
     for (var i = 0; i < split.length; i++) { 
      res = res + split[i]; 
     } 
     res = res + '">Choose from</button>' 
     return res; 
    } else { 
     return a; 
    } 
} 
} 
$scope.gridPosteOpts = { 

columnDefs : [ 
    { 
     name : 'Title', 
     field : 'title', 
     enableCellEdit : false 
    }, 
[...] 
    { 
     name : 'Person', 
     cellTemplate : '<div class="ui-grid-cell-contents">{{grid.appScope.choosePerson(row.entity.person)}}</div>', 
     enableCellEdit : false 
    } 

這段代碼幾乎可以正常工作，因爲我得到了單元格中的索引數據，但它顯示而不是被解釋爲HTML（即我的手機包含字符串'<按鈕類型=「不......‘）

Answer 1

使用 cellTemplate : '<div class="ui-grid-cell-contents"><button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="{{grid.appScope.choosePerson(row.entity.person)}}">Choose from</button></div>'

，並有choosePerson()只返回數據

你可以’使用angulars {}}將元素注入到DOM中。這將永遠是純文本的

Answer 2

試圖將這段代碼

<div class="ui-grid-cell-contents">{{grid.appScope.choosePerson(row.entity.person)}}</div> 

與

<div class="ui-grid-cell-contents" ng-bind-html="grid.appScope.choosePerson(row.entity.person)"></div> 

Answer 3

Finnaly設法通過自己使用型動物的混合辦法對SO發現做到這一點！

我使用@ j2L4e模板作爲案例「按鈕需要」，只是其他案例的文本;兩個與ng-if

之間我這裏選擇的是「最終」代碼：

$scope.containsComma = function(a) {return a.contains(',')}; 
$scope.choosePersonBis = function(a) { 
    if (a.length == 0) { 
     return 'No person'; 
    } else { 
     var split = a.split(','); 
     if (split.length > 1) { 
      var res = ''; 
      for (var i = 0; i < split.length; i++) { 
       res = res + split[i]; 
      } 
      return res; 
     } else { 
      return a; 
     } 
    } 
; 
$scope.gridPosteOpts = { 
    columnDefs : [ 
     { 
      name : 'Title', 
      field : 'title', 
      enableCellEdit : false 
     }, 
    [...] 
    { 
     title : 'Person', 
     cellTemplate : '<div ng-if="grid.appScope.containsComma(row.entity.person)" class="ui-grid-cell-contents"><button type="button" class="btn btn-default" popover="{{grid.appScope.choosePersonBis(row.entity.person)}}" popover-placement="right" popover-trigger="focus">Choose person</button></div><div ng-if="grid.appScope.notContainsComma(row.entity.person)" class="ui-grid-cell-contents">{{grid.appScope.choosePersonBis(row.entity.person)}}</div>' 
    } 
};