javascript - 收到 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-repeat 很棒:

初始化你的元素:(在 Controller 中)

$scope.elements = [];

通过 angularjs 原生指令将模板链接到 $scope :

<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.');
        });
    }