我正在尝试将动态范围变量与预定义的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;
}
}
}]);
数据正在构建预期的方式,但我遇到了将其绑定到上述模板的问题。