I am attempting to create a feature in this app where users can click "Add" to add any category they want in a form. I will save all of them and then output them, but I'm having trouble with the output part.
For a dynamic view example, you can check out: http://plnkr.co/edit/j5RGMi3RTPZ85XGvaa2D?p=preview
The javascript file looks like this:
var app = angular.module('plunker', []);
app.controller('ctrl',['$scope', function($scope){
$scope.templates = [];
$scope.addTemplate = function(){
$scope.templates.push('category');
};
}]);
The view includes:
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link rel="stylesheet" href="style.css" />
<script data-require="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="54353a33213835267a3e2714657a647a2c">[email protected]</a>" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js" data-semver="1.0.8"></script>
<script src="app.js"></script>
<p>Click button to add Category</p>
<button ng-click="addTemplate()">Add Category</button>
<div ng-repeat="template in templates">
<ng-include src="template"></ng-include></div>
<script type="text/ng-template" id="category">
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label" for="categoryTitle">Title</label>
<div class="col-sm-10">
<input id="categoryTitle" name="categoryTitle" ng-model="category.title" type="text" class="form-control" placeholder="Input your category title" required>
</div>
</div>
<br>
<!-- Begin textarea -->
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<textarea id="nonresizable" class="form-control" ng-model="category.content" placeholder="Input your category content here" rows="5" required></textarea>
<hr>
</div>
</div>
<!-- End textarea -->
</form>
<p>The inputed Category</p>
<label>Title</label>
<div>{{category.title}}</div>
<div class="col-sm-offset-2 col-sm-10">
<textarea>{{category.content}}</textarea>
<hr>
</div>
Your feedback and thoughts are highly appreciated!