動態視圖中的AngularJs模型
[英]AngularJs' model in dynamic view
問題描述
這是我想要做的。
在此應用程序中，用戶可以單擊“添加”以此形式添加他們想要的任何類別，我將保存所有類別，然后將其輸出。 但是，我不知道如何輸出它們。
這是動態視圖的工作示例： 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>
任何想法將不勝感激！
3 個解決方案
解決方案1
0 2015-10-28 00:55:11
您要在添加注釋/頁面后更改$ 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"
});
};
解決方案2
0 2015-10-28 01:18:48
你可以像那樣做
只是命題
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'
});
});
解決方案3
0 已采納 2015-11-10 14:30:36
因此，我進行了更多研究並使其生效！ 好極了！
這是plunker中的現場演示， http： //plnkr.co/edit/AQFlEV6FDEKRAsvBc0PE？p = preview。
$scope.addField = function() {
$scope.data.fields.push({
content: "test " + counter++
});
};
基本上，每次將新類別推送到作用域時，我都需要為每個類別動態添加名稱。 希望這是有道理的。
再次感謝您提供所有答案！
AngularJS動態模型
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.