Angular JS - Generate Check box and text box based on JSON
0
I need to create new HTML elements(In my case checkbox) based on JSON. Tried and got the checkbox for each book listed based on the type of contents array in books. But I need to loop further to find on Selection array for each book at the time checkbox is clicked and create the textbox for sold copies and for remaining copies for that specific book. Some help will be appreciated to find on Selection array and create text boxes(each one for sold copies and remaining copies) when specific checkbox(book) is clicked. Thanks in advance
mybooks.json
"mycollection" :
"title" : "Books",
"contents" : [
"title" : "Book1",
"type" : "CHECKBOX"
,
"title" : "Book2",
"type" : "CHECKBOX"
,
"title" : "Book3",
"type" : "CHECKBOX",
"onSelection" : [
"title" : "Sold Copies",
"type" : "TEXT"
,
"title" : "Remaining Copies",
"type" : "TEXT"
]
,
"title" : "Book4",
"type" : "CHECKBOX",
"onSelection" : [
"title" : "",
"type" : "TEXT"
]
]
templates.json
"textboxTemplate": "<input type='text' name='firstname'>",
"checkboxTemplate": "<div style='margin-top:70px,margin-left:50px'><label class='containerr'><input type='checkbox' id = 'myCheck' checked='checked'><span class='checkmarkk'></span></label><div id='personalhis_title' style='margin-left:30px'>content.title</div></div>"
app.js
var app = angular.module('myApppli', );
app.config(function ($sceDelegateProvider)
$sceDelegateProvider.resourceUrlWhitelist(['self', '**']);
);
app.constant('URL', 'json/');
app.factory('BookService', function ($http, URL)
var getBooks = function ()
return $http.get(URL + 'mybooks.json');
;
return
getBooks: getBooks
;
);
app.factory('TemplateService', function ($http, URL)
var getTemplates = function ()
return $http.get(URL + 'templates.json');
;
return
getTemplates: getTemplates
;
);
app.controller('contl', function (BookService)
var ctrll = this;
ctrll.content = ;
ctrll.fetchContent = function ()
BookService.getBooks().then(function (result)
ctrll.content = result.data.mycollection.contents;
);
;
ctrll.fetchContent();
);
app.directive('contentItem', function ($compile, TemplateService)
var getTemplate = function (templates, type)
var types = type.type;
var template = '';
switch (types)
case 'textbox':
template = templates.textboxTemplate;
break;
case 'CHECKBOX':
template = templates.checkboxTemplate;
break;
return template;
;
var linker = function (scope, element, attrs)
TemplateService.getTemplates().then(function (response)
var templates = response.data;
element.html(getTemplate(templates, scope.content));
$compile(element.contents())(scope);
);
;
return
restrict: 'E',
link: linker,
scope:
content: '='
;
);
index.html
<div id="containerr" ng-controller="contl as ctrll">
<content-item ng-repeat="item in ctrll.content" content="item">
</content-item>
</div>
javascript html angularjs json
edited Nov 14 '18 at 11:18
Gaurav Tripathi
536610
asked Nov 14 '18 at 10:52
MishtyMishty
437
add a comment |
0
I need to create new HTML elements(In my case checkbox) based on JSON. Tried and got the checkbox for each book listed based on the type of contents array in books. But I need to loop further to find on Selection array for each book at the time checkbox is clicked and create the textbox for sold copies and for remaining copies for that specific book. Some help will be appreciated to find on Selection array and create text boxes(each one for sold copies and remaining copies) when specific checkbox(book) is clicked. Thanks in advance
mybooks.json
"mycollection" :
"title" : "Books",
"contents" : [
"title" : "Book1",
"type" : "CHECKBOX"
,
"title" : "Book2",
"type" : "CHECKBOX"
,
"title" : "Book3",
"type" : "CHECKBOX",
"onSelection" : [
"title" : "Sold Copies",
"type" : "TEXT"
,
"title" : "Remaining Copies",
"type" : "TEXT"
]
,
"title" : "Book4",
"type" : "CHECKBOX",
"onSelection" : [
"title" : "",
"type" : "TEXT"
]
]
templates.json
"textboxTemplate": "<input type='text' name='firstname'>",
"checkboxTemplate": "<div style='margin-top:70px,margin-left:50px'><label class='containerr'><input type='checkbox' id = 'myCheck' checked='checked'><span class='checkmarkk'></span></label><div id='personalhis_title' style='margin-left:30px'>content.title</div></div>"
app.js
var app = angular.module('myApppli', );
app.config(function ($sceDelegateProvider)
$sceDelegateProvider.resourceUrlWhitelist(['self', '**']);
);
app.constant('URL', 'json/');
app.factory('BookService', function ($http, URL)
var getBooks = function ()
return $http.get(URL + 'mybooks.json');
;
return
getBooks: getBooks
;
);
app.factory('TemplateService', function ($http, URL)
var getTemplates = function ()
return $http.get(URL + 'templates.json');
;
return
getTemplates: getTemplates
;
);
app.controller('contl', function (BookService)
var ctrll = this;
ctrll.content = ;
ctrll.fetchContent = function ()
BookService.getBooks().then(function (result)
ctrll.content = result.data.mycollection.contents;
);
;
ctrll.fetchContent();
);
app.directive('contentItem', function ($compile, TemplateService)
var getTemplate = function (templates, type)
var types = type.type;
var template = '';
switch (types)
case 'textbox':
template = templates.textboxTemplate;
break;
case 'CHECKBOX':
template = templates.checkboxTemplate;
break;
return template;
;
var linker = function (scope, element, attrs)
TemplateService.getTemplates().then(function (response)
var templates = response.data;
element.html(getTemplate(templates, scope.content));
$compile(element.contents())(scope);
);
;
return
restrict: 'E',
link: linker,
scope:
content: '='
;
);
index.html
<div id="containerr" ng-controller="contl as ctrll">
<content-item ng-repeat="item in ctrll.content" content="item">
</content-item>
</div>
javascript html angularjs json
edited Nov 14 '18 at 11:18
Gaurav Tripathi
536610
asked Nov 14 '18 at 10:52
MishtyMishty
437
do i understand correctly - you want to add checkbox next to each book, and after select some of them - click ex. button which push all selected books?
– BartoszTermena
Nov 14 '18 at 11:18
I need to list all books with title next to checkbox for each book. Completed that. On selecting or clicking a checkbox i need to add two text boxes adjacent to book title to input number of sold copies and number of remaining copies for that particular book
– Mishty
Nov 14 '18 at 11:22
add a comment |
0
0
0
I need to create new HTML elements(In my case checkbox) based on JSON. Tried and got the checkbox for each book listed based on the type of contents array in books. But I need to loop further to find on Selection array for each book at the time checkbox is clicked and create the textbox for sold copies and for remaining copies for that specific book. Some help will be appreciated to find on Selection array and create text boxes(each one for sold copies and remaining copies) when specific checkbox(book) is clicked. Thanks in advance
mybooks.json
"mycollection" :
"title" : "Books",
"contents" : [
"title" : "Book1",
"type" : "CHECKBOX"
,
"title" : "Book2",
"type" : "CHECKBOX"
,
"title" : "Book3",
"type" : "CHECKBOX",
"onSelection" : [
"title" : "Sold Copies",
"type" : "TEXT"
,
"title" : "Remaining Copies",
"type" : "TEXT"
]
,
"title" : "Book4",
"type" : "CHECKBOX",
"onSelection" : [
"title" : "",
"type" : "TEXT"
]
]
templates.json
"textboxTemplate": "<input type='text' name='firstname'>",
"checkboxTemplate": "<div style='margin-top:70px,margin-left:50px'><label class='containerr'><input type='checkbox' id = 'myCheck' checked='checked'><span class='checkmarkk'></span></label><div id='personalhis_title' style='margin-left:30px'>content.title</div></div>"
app.js
var app = angular.module('myApppli', );
app.config(function ($sceDelegateProvider)
$sceDelegateProvider.resourceUrlWhitelist(['self', '**']);
);
app.constant('URL', 'json/');
app.factory('BookService', function ($http, URL)
var getBooks = function ()
return $http.get(URL + 'mybooks.json');
;
return
getBooks: getBooks
;
);
app.factory('TemplateService', function ($http, URL)
var getTemplates = function ()
return $http.get(URL + 'templates.json');
;
return
getTemplates: getTemplates
;
);
app.controller('contl', function (BookService)
var ctrll = this;
ctrll.content = ;
ctrll.fetchContent = function ()
BookService.getBooks().then(function (result)
ctrll.content = result.data.mycollection.contents;
);
;
ctrll.fetchContent();
);
app.directive('contentItem', function ($compile, TemplateService)
var getTemplate = function (templates, type)
var types = type.type;
var template = '';
switch (types)
case 'textbox':
template = templates.textboxTemplate;
break;
case 'CHECKBOX':
template = templates.checkboxTemplate;
break;
return template;
;
var linker = function (scope, element, attrs)
TemplateService.getTemplates().then(function (response)
var templates = response.data;
element.html(getTemplate(templates, scope.content));
$compile(element.contents())(scope);
);
;
return
restrict: 'E',
link: linker,
scope:
content: '='
;
);
index.html
<div id="containerr" ng-controller="contl as ctrll">
<content-item ng-repeat="item in ctrll.content" content="item">
</content-item>
</div>
javascript html angularjs json
edited Nov 14 '18 at 11:18
Gaurav Tripathi
536610
asked Nov 14 '18 at 10:52
MishtyMishty
437
I need to create new HTML elements(In my case checkbox) based on JSON. Tried and got the checkbox for each book listed based on the type of contents array in books. But I need to loop further to find on Selection array for each book at the time checkbox is clicked and create the textbox for sold copies and for remaining copies for that specific book. Some help will be appreciated to find on Selection array and create text boxes(each one for sold copies and remaining copies) when specific checkbox(book) is clicked. Thanks in advance
mybooks.json
"mycollection" :
"title" : "Books",
"contents" : [
"title" : "Book1",
"type" : "CHECKBOX"
,
"title" : "Book2",
"type" : "CHECKBOX"
,
"title" : "Book3",
"type" : "CHECKBOX",
"onSelection" : [
"title" : "Sold Copies",
"type" : "TEXT"
,
"title" : "Remaining Copies",
"type" : "TEXT"
]
,
"title" : "Book4",
"type" : "CHECKBOX",
"onSelection" : [
"title" : "",
"type" : "TEXT"
]
]
templates.json
"textboxTemplate": "<input type='text' name='firstname'>",
"checkboxTemplate": "<div style='margin-top:70px,margin-left:50px'><label class='containerr'><input type='checkbox' id = 'myCheck' checked='checked'><span class='checkmarkk'></span></label><div id='personalhis_title' style='margin-left:30px'>content.title</div></div>"
app.js
var app = angular.module('myApppli', );
app.config(function ($sceDelegateProvider)
$sceDelegateProvider.resourceUrlWhitelist(['self', '**']);
);
app.constant('URL', 'json/');
app.factory('BookService', function ($http, URL)
var getBooks = function ()
return $http.get(URL + 'mybooks.json');
;
return
getBooks: getBooks
;
);
app.factory('TemplateService', function ($http, URL)
var getTemplates = function ()
return $http.get(URL + 'templates.json');
;
return
getTemplates: getTemplates
;
);
app.controller('contl', function (BookService)
var ctrll = this;
ctrll.content = ;
ctrll.fetchContent = function ()
BookService.getBooks().then(function (result)
ctrll.content = result.data.mycollection.contents;
);
;
ctrll.fetchContent();
);
app.directive('contentItem', function ($compile, TemplateService)
var getTemplate = function (templates, type)
var types = type.type;
var template = '';
switch (types)
case 'textbox':
template = templates.textboxTemplate;
break;
case 'CHECKBOX':
template = templates.checkboxTemplate;
break;
return template;
;
var linker = function (scope, element, attrs)
TemplateService.getTemplates().then(function (response)
var templates = response.data;
element.html(getTemplate(templates, scope.content));
$compile(element.contents())(scope);
);
;
return
restrict: 'E',
link: linker,
scope:
content: '='
;
);
index.html
<div id="containerr" ng-controller="contl as ctrll">
<content-item ng-repeat="item in ctrll.content" content="item">
</content-item>
</div>
javascript html angularjs json
javascript html angularjs json
edited Nov 14 '18 at 11:18
Gaurav Tripathi
536610
asked Nov 14 '18 at 10:52
MishtyMishty
437
edited Nov 14 '18 at 11:18
Gaurav Tripathi
536610
asked Nov 14 '18 at 10:52
MishtyMishty
437
edited Nov 14 '18 at 11:18
Gaurav Tripathi
536610
edited Nov 14 '18 at 11:18
Gaurav Tripathi
536610
edited Nov 14 '18 at 11:18
Gaurav Tripathi
536610
536610
asked Nov 14 '18 at 10:52
MishtyMishty
437
asked Nov 14 '18 at 10:52
MishtyMishty
437
asked Nov 14 '18 at 10:52
MishtyMishty
437
437
do i understand correctly - you want to add checkbox next to each book, and after select some of them - click ex. button which push all selected books?
– BartoszTermena
Nov 14 '18 at 11:18
I need to list all books with title next to checkbox for each book. Completed that. On selecting or clicking a checkbox i need to add two text boxes adjacent to book title to input number of sold copies and number of remaining copies for that particular book
– Mishty
Nov 14 '18 at 11:22
add a comment |
do i understand correctly - you want to add checkbox next to each book, and after select some of them - click ex. button which push all selected books?
– BartoszTermena
Nov 14 '18 at 11:18
I need to list all books with title next to checkbox for each book. Completed that. On selecting or clicking a checkbox i need to add two text boxes adjacent to book title to input number of sold copies and number of remaining copies for that particular book
– Mishty
Nov 14 '18 at 11:22
do i understand correctly - you want to add checkbox next to each book, and after select some of them - click ex. button which push all selected books?
– BartoszTermena
Nov 14 '18 at 11:18
do i understand correctly - you want to add checkbox next to each book, and after select some of them - click ex. button which push all selected books?
– BartoszTermena
Nov 14 '18 at 11:18
I need to list all books with title next to checkbox for each book. Completed that. On selecting or clicking a checkbox i need to add two text boxes adjacent to book title to input number of sold copies and number of remaining copies for that particular book
– Mishty
Nov 14 '18 at 11:22
I need to list all books with title next to checkbox for each book. Completed that. On selecting or clicking a checkbox i need to add two text boxes adjacent to book title to input number of sold copies and number of remaining copies for that particular book
– Mishty
Nov 14 '18 at 11:22
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53298477%2fangular-js-generate-check-box-and-text-box-based-on-json%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53298477%2fangular-js-generate-check-box-and-text-box-based-on-json%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
do i understand correctly - you want to add checkbox next to each book, and after select some of them - click ex. button which push all selected books?
– BartoszTermena
Nov 14 '18 at 11:18
I need to list all books with title next to checkbox for each book. Completed that. On selecting or clicking a checkbox i need to add two text boxes adjacent to book title to input number of sold copies and number of remaining copies for that particular book
– Mishty
Nov 14 '18 at 11:22