Javascript 动态视图中的AngularJs模型_Javascript_Angularjs_Angularfire

Javascript 动态视图中的AngularJs模型

javascript angularjs

Javascript 动态视图中的AngularJs模型,javascript,angularjs,angularfire,Javascript,Angularjs,Angularfire,这就是我要做的在此应用程序中，用户可以单击“添加”在表单中添加他们想要的任何类别，我将保存所有类别，然后将其输出。但是，我不知道如何输出它们以下是动态视图的工作示例：以下是js文件： var app = angular.module('plunker', []); app.controller('ctrl',['$scope', function($scope){ $scope.templates = []; $scope.addTemplate = function(){ $s

这就是我要做的

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

以下是动态视图的工作示例：

以下是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>

任何想法都将不胜感激

添加注释/页面后，是否要更改$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"
});
};

你可以做出这样的想法

公正的主张

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'
    });



 });

所以，我做了更多的研究，并使它的工作！耶

这里是plunker的现场演示

})

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

再次感谢所有的答案

这张便条跟这页有什么关系？预期的结果是什么？然后问题说添加类别。。。。非常混乱抱歉命名不好…我修改了plunker，希望这有意义。我只想保存这个动态视图生成的所有数据。仍然不清楚目标是什么或预期结果是什么。我想获取表单中输入的所有数据。我再次修改了plunker…谢谢回复，但是用户可以在这里添加无限模板，所以我不太理解模板[templates1]=folder1/；部分…请澄清？但我无法知道每次有多少内容，因为用户会动态添加。有意义吗？您可以在$scope.templates变量上添加一个手表：$scope.watch'templates'，functionoldValue，newValue{//DO STUFF HERE}；因此，每次变量更改时，您都可以执行您想要的操作，更多信息请参见：

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


tempsObj.selectedTemp = "templates1";

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'
    });



 });

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