Question

这是我想要做的。

在此应用中，用户可以点击＆＃34;添加＆＃34;在这个表单中添加他们想要的任何类别，我将保存所有类别，然后输出它。但是，我无法弄清楚如何输出它们。

以下是动态视图的工作示例：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

您想在添加注释/页面后更改$ 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

所以，我做了更多研究并使其发挥作用！ YAY！

以下是plunker中的现场演示Linq-to-JSON。

{{1}}

};

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

再次感谢所有答案！

AngularJs＆＃39;动态视图中的模型

3 个答案: