how to dynamically create templates in angular.js

Question

how to dynamically create templates in angular.js

New to angularjs so I'm not sure how to best phrase this question so this may be a duplicate. I have a table that I want to populate with a label and some check boxes. Each row represents a test metric with two checkboxes indicating "pass" or "fail"

function ListController($scope) {
    $scope.items = [
        {name: 'Feature X', flash: false, html: false},
        {name: 'Feature Y', flash: false, html: false}
    ];
}

I've got the table populating correctly, but what I'm not sure about is how can create this table dynamically? I want to be able to submit this data and create a new table when a new test is selected. The only way I can see right now to invoke this function is on the initialization of the document and I can't see how I can pass in any additional values to change the "items" node based on the test. fiddle below:

http://jsfiddle.net/3Lcue/

angularjs

Answer 1

You can use $resource to submit/retrieve data from the server:

app = angular.module("Test", ["ngResource"])

function ListController($scope, $resource) {
    var Test = $resource("/tests/:id", {id: "@id"});
    $scope.items = Test.query()

    $scope.addTest: function() {
        $scope.items.push($scope.newTest)
        $scope.newTest = {}
    }
}

and then bind newTest.name, newTest.flash, newTest.html in your view using ng-model.