AngularJs'动态视图中的模型

Question

这是我正在尝试做的事情。

在此应用程序中，用户可以单击"Add" 在此表单中添加他们想要的任何类别，我将保存所有类别，然后输出。但是，我不知道如何输出它们。

这是动态视图的一个工作示例：http://plnkr.co/edit/j5RGMi3RTPZ85XGvaa2D?p=preview

这是js文件：

var app = angular.module('plunker', []);

app.controller('ctrl',['$scope', function($scope){
$scope.templates = [];
$scope.addTemplate = function(){
    $scope.templates.push('category');
};
}]);

视图如下：

<!DOCTYPE html>
<html ng-app="plunker">

 <head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.0.x" 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>Append Category via button click</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>

如有任何想法，我们将不胜感激！

Answer 1

您想在添加 note/page 后更改 $scope.templates 中的内容吗？

如果您想更改模板中每条笔记的内容，您可以：

var app = angular.module('plunker', []);

app.controller('ctrl',['$scope', function($scope){
$scope.templates = [];
$scope.addTemplate = function(){
    $scope.templates.push({
        content1 : "content1text",
        content2 : "content3text",
        content3 : "content3text"
});
};

Answer 2

你可以做类似的东西

只是命题

Templates.js

var tempsObj = {} | tempsObj;
tempsObj.templates = function(){
 var template = [];
 template ["templates1"] = "folder1/";
 template ["templates2"] = "folder1/";
 return template;
}


tempsObj.selectedTemp = "templates1";

Module.js

var app = angular.module("plunker",['ngRoute']);

home.config(function($routeProvider,$locationProvider){

$routeProvider

    .when('/',{

        templateUrl : tempsObj.templates[tempsObj.selectedTemp]+'plunker.html',
        controller : 'plunkerController'
    })
    .when('/404',{
        templateUrl : tempsObj.templates[tempsObj.selectedTemp]+'404.html',
        controller : '404Controller'
    })
    .otherwise({
        redirectTo : '/404'
    });



 });

Answer 3

所以，我做了更多的研究并让它发挥作用！耶！

这是 plunker 中的现场演示，http://plnkr.co/edit/AQFlEV6FDEKRAsvBc0PE?p=preview。

$scope.addField = function() {
  $scope.data.fields.push({
  content: "test " + counter++
});

};

基本上我需要为每个类别动态添加名称，每次将新类别推送到范围。希望这是有道理的。

再次感谢大家的回答！

AngularJs'动态视图中的模型

AngularJs' model in dynamic view

javascript

angularjs

angularfire