在收到JSON後將按鈕添加到html模板

Question

我想在用戶訪問站點時從我的API接收JSON之後動態地將按鈕添加到DOM。我已經實現了獲取數據的功能，但現在我遇到了將按鈕動態添加到HTML模板的問題。此外，我不知道如何調用特定模板的首頁加載函數。

這裏是我的代碼：

app.run(function($rootScope, $http, ApiService) { 
    $http.get('connection.properties').then(function (response) { 
     ApiService.getAllElements($rootScope); 
    }); 
}); 

在我ApiService我有這樣的功能：

 getAllElements : function($scope) { 
      var requestData = { 
       'username' : 'user123' 
      }; 

      this.doRequest(requestData).success(function(data) { 
       if (data.success) { 
        console.log(data); // add buttons 
       } 
      }).error(function() { 
       alert('Sorry bro.'); 
      }); 
     } 

我是一個完整AngularJS初學者，所以我不知道如何正確的方法做這個。 任何幫助將不勝感激。

編輯：

JSON數據結構是這樣的：

{"success":true,"msg":"user active,1 element in db","userid":"1","elements":[{"element_id":"1","name":"Element1","description":"This is element 1"}]} 

在我profile.html模板我有這樣的靜態按鈕：

<div class="btn-group btn-group-elements"> 
     <button type="button" class="btn btn-default" ng-model="element" ng-change="save(true)" btn-radio="'1'">Element1</button> 
    </div> 

Answer 1

你可以有多個「元素「在這些數據？ 在這種情況下，NG-重複是巨大的：

初始化元素：謝謝（在控制器）

$scope.elements = []; 

鏈接模板到$範圍angularjs原生指令：

<div class="btn-group btn-group-elements"> 
    <button ng-repeat="element in elements" type="button" class="btn btn-default" ng-click="doSomething(element, $index)">{{ element.name }}</button> 
</div> 

取數據：

getAllElements : function($scope) { 
     var requestData = { 
      'username' : 'user123' 
     }; 

     this.doRequest(requestData).success(function(data) { 
      if (data.success) { 
       $scope.elements = data.elements; // add buttons 
      } 
     }).error(function() { 
      alert('Sorry bro.'); 
     }); 
    }