Модель AngularJs в динамическом режиме

Вот что я пытаюсь сделать.Модель AngularJs в динамическом режиме

В этом приложении пользователь может нажать «Добавить», чтобы добавить любую категорию, которую они хотят в этой форме, и я сохраню все из них, а затем выведу ее. Однако я не мог понять, как их выводить.

Вот рабочий пример для динамического представления: 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="[email protected]" 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>

Любые мысли были бы оценены!

источник

2015-10-28 Lisa

Что нужно сделать '' '' '' '' '''''? Каковы ожидаемые результаты? Тогда вопрос говорит добавить категорию .... довольно запутанный – charlietfl

извините за плохое имя .... Я изменил плункер, надеюсь, что это имеет смысл. Я просто хочу сохранить все данные, созданные этим динамическим представлением. – Lisa

По-прежнему непонятно, какова цель или какие ожидаемые результаты: – charlietfl

Итак, я сделал больше исследований и сделал это! УРА!

Настоящая демо-версия в plunker, http://plnkr.co/edit/AQFlEV6FDEKRAsvBc0PE?p=preview.

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

};

В принципе, мне нужно динамически добавлять имя для каждой категории, каждый раз подталкивая новую категорию к области. Надеюсь, это имеет смысл.

Еще раз спасибо за ответы!

источник

2015-11-10 14:30:36 Lisa

Вы хотите изменить содержимое в $ 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" 
}); 
};

источник

2015-10-28 00:55:11

, но я не буду знать, сколько контента я буду иметь каждый раз, так как пользователь добавит его динамически. имеет ли это смысл? – Lisa

вы можете добавить часы на 'переменной scope.templates' $: ' $ scope.watch (шаблоны, функции (OldValue, новое_значение) { // DO STUFF ЗДЕСЬ }); ' Таким образом, каждый раз, когда переменное изменение вы можете делать, что хотите, больше информации в: [https://docs.angularjs.org/api/ng/type/$rootScope.Scope](https://docs.angularjs.org/api/ng/ type/$ rootScope.Scope) –

Вы можете сделать somethinkg как этот

только предложение

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



});

источник

2015-10-28 01:18:48

спасибо за ответ, но пользователь может добавить бесконечный шаблон здесь, так что я действительно не понимаю шаблон ["templates1"] = "folder1 /"; часть .... уточните пожалуйста? – Lisa

Модель AngularJs в динамическом режиме

ответ

Смежные вопросы