vendredi 11 septembre 2015

Angularjs - bind dynamic data to predefined template

I'm trying to bind dynamic scope variable with predefined html template. The data is being built based on user selection via drop-down and has ng-click on a button that calls the method to build scope variable, see below for an example:

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>

I have template defined as overview-form-temp.html and using ng-include to load it on the view:

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

Template:

<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>

Controller:

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

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

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

The data is building the way expected but I'm having issues binding it to the template above.



via Chebli Mohamed

Aucun commentaire:

Enregistrer un commentaire