Angularjs - 将动态数据绑定到预定义模板

时间:2015-09-11 15:00:36

标签: javascript angularjs

我正在尝试将动态范围变量与预定义的html模板绑定。数据是基于用户选择通过下拉列表构建的,并且按下了一个调用方法来构建范围变量的按钮,请参阅下面的示例:

HTML:

<select id="category" class="form-control" ng-model="dataParam.category">
    <option value="">Choose Category</option>
    <option value="">overview</option>
    <option value="">mention</option>
    <option value="">sentiment</option>
</select>
<button ng-click="buildMetricData()" class="form-control">New</button>

我将模板定义为overview-form-temp.html并使用ng-include将其加载到视图中:

<section id="overview" class="well custom-margin" ng-include="'Views/overview-form-temp.html'"></section>

模板:

<form id="overview-form" name="overview-form" novalidate>
    <fieldset class="space-bottom">
        <legend>U.S. Brand Reputation</legend>
        <div class="form-horizontal form-widgets col-sm-12">
            <div class="form-group">
                <label for="awarness" class="col-sm-3">Awareness:</label>
                <div class="col-sm-2">
                    <input type="number" min="0" id="awareness" class="form-control" ng-model="metricData.subcategory['us total']['awareness']" />
                </div>
                <div style="clear:both;"></div>
                <label for="hight-trust" class="col-sm-3">High Trust:</label>
                <div class="col-sm-2">
                    <input type="number" min="0" id="high-trust" class="form-control" ng-model="metricData.subcategory['us total']['high trust']" />
                </div>
            </div>
        </div>
    </fieldset>
</form>

控制器:

var app = angular.module('AdminApp',[]);
app.controller('MainDataContrl', ['$scope','$compile', function($scope,$compile){
    $scope.buildMetricData = function(){

        $scope.metricData = {
            params:{
             category: $scope.dataParam.category
            },
            subcategory:{}
        }

        switch($scope.metricData.params.category){
            case 'Overview':
                $scope.metricData.subcategory['us total'] = {};
                break;
        }
    }
}]);

数据正在构建预期的方式,但我遇到了将其绑定到上述模板的问题。

0 个答案:

没有答案