Develop Reference

Collect list item according to name and store in array or object

I have a dual list in which you get an option to add left list item in right list. And right list is a form. Now i am stuck at a problem where when user click the submit button all the li in right list and there inside values get store in an object with there specific name div id name. I have worked on it for 5 days now but unable to collect data according to div id name. Like
<div id="name1">
<input id="tts" type="text" value="${CTLIST.tts}"> s<br>
<input id="topic_level" type="text" value="${CTLIST.topic_level}"><br>
<label>${Object.keys(CTLIST)[4]}</label> <input id="to_be_shown_individually" type="checkbox" ${(CTLIST.to_be_shown_individually && 'checked')}> <br>
<label>${Object.keys(CTLIST)[3]}</label><input id="check_for_geometry" type="checkbox" ${(CTLIST.check_for_geometry && 'checked')}><br>
</div>
Suppose this is an li of right list.
I want data to get stored like
{
[name : name1,
tts.value : 10,
ifcheckboxcheck : true,
],
[name : name2,
tts.value : 10,
ifcheckboxcheck : true,]
}
HEre is my html
<section class="ctList">
<div class="container">
<div class="row">
<div class="dual-list list-left col-md-5">
<div class="well text-right">
<div class="row">
<div class="col-md-10">
<div class="input-group">
<span class="input-group-addon glyphicon glyphicon-search"><i class="fa fa-search"
aria-hidden="true" style="padding-right: 20px;"></i></span>
<input type="text" name="SearchDualList" class="form-control"
placeholder="search" />
</div>
</div>
<div class="col-md-2">
<div class="btn-group">
<a class="btn btn-default selector" title="select all"><i
class="glyphicon glyphicon-unchecked"></i></a>
</div>
</div>
</div>
<ul class="list-group" id="La">
</ul>
</div>
</div>
<div class="list-arrows col-md-1 text-center">
<button class="btn btn-default btn-sm move-left">
<span class="glyphicon glyphicon-chevron-left"><i class="fa fa-arrow-left"
aria-hidden="true"></i></span>
</button>
<button class="btn btn-default btn-sm move-right">
<span class="glyphicon glyphicon-chevron-right"><i class="fa fa-arrow-right"
aria-hidden="true"></i></span>
</button>
</div>
<div class="dual-list list-right col-md-5">
<div class="well">
<div class="row">
<div class="col-md-2">
<div class="btn-group">
<a class="btn btn-default selector" title="select all"><i
class="glyphicon glyphicon-unchecked"></i></a>
</div>
</div>
<div class="col-md-10">
<div class="input-group">
<input type="text" name="SearchDualList" class="form-control"
placeholder="search" />
<span class="input-group-addon glyphicon glyphicon-search"></span>
</div>
</div>
</div>
<form id="rightData" method="POST">
<ul class="list-group" id="accordian">
<!-- right list -->
</ul>
<input type="submit" value="submit" name="submit">
</form>
</div>
</div>
</div>
</div>
</section>
This is my js which is obviously not working
$('.content').hide();
$('.listelement').on('click', function () {
if (!($(this).children('.content').is(':visible'))) {
$('.content').slideUp();
$(this).children('.content').slideDown();
} else {
$('.content').slideUp();
}
});
$(function () {
$('body').on('click', '.list-group .list-group-item', function () {
$(this).toggleClass('active');
});
$('.list-arrows button').click(function () {
var $button = $(this), actives = '';
if ($button.hasClass('move-left')) {
actives = $('.list-right ul li.active');
actives.clone().appendTo('.list-left ul');
actives.remove();
} else if ($button.hasClass('move-right')) {
actives = $('.list-left ul li.active');
actives.clone().appendTo('.list-right ul');
actives.remove();
}
});
$('.dual-list .selector').click(function () {
var $checkBox = $(this);
if (!$checkBox.hasClass('selected')) {
$checkBox.addClass('selected').closest('.well').find('ul li:not(.active)').addClass('active right');
$checkBox.children('i').removeClass('glyphicon-unchecked').addClass('glyphicon-check');
} else {
$checkBox.removeClass('selected').closest('.well').find('ul li.active').removeClass('active');
$checkBox.children('i').removeClass('glyphicon-check').addClass('glyphicon-unchecked');
}
});
$('[name="SearchDualList"]').keyup(function (e) {
var code = e.keyCode || e.which;
if (code == '9') return;
if (code == '27') $(this).val(null);
var $rows = $(this).closest('.dual-list').find('.list-group li');
var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();
$rows.show().filter(function () {
var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
return !~text.indexOf(val);
}).hide();
});
});
////printing properties
$(function () {
var ctList = [];
var ctRight = [];
var $tBody = $("#La");
var $rbody = $("#accordian");
$.getJSON('https://api.myjson.com/bins/d6n2a', function (data) {
data.topic_info.qt_ct_connection.map(value => {
value.ct_list.forEach((CTLIST) => {
$tBody.append(`<li class="list-group-item" id="rl">
<span id="nameOfCt">${CTLIST.ct}</span>
View More
<div id="${CTLIST.ct}" class="collapse valueDiv">
<label>${Object.keys(CTLIST)[2]}</label> <input id="tts" type="text" value="${CTLIST.tts}"><br>
<label>${Object.keys(CTLIST)[1]}</label> <input id="topic_level" type="text" value="${CTLIST.topic_level}"><br>
<label>${Object.keys(CTLIST)[4]}</label> <input id="to_be_shown_individually" type="checkbox" ${(CTLIST.to_be_shown_individually && 'checked')}> <br>
<label>${Object.keys(CTLIST)[3]}</label><input id="check_for_geometry" type="checkbox" ${(CTLIST.check_for_geometry && 'checked')}><br>
</div>
</li>`);
});
})
})
})
</script>
<script>
var SendDataObject = {};
$("#rightData").on("submit", function (event) {
event.preventDefault();
var IDs = [];
var list = {};
var data = {} ;
var tts = {};
let rightListLength;
rightListLength = $('#rightData li').length;
var tts = [];
$("#rightData li").each(function (){
$("#rightdata").find("div").each(function(){ IDs.push(this.id);
$('#rightData').find("#tts").each(function () { IDs.push(this.value)})
})
});
// $('#rightData li').each(function () {
// var a = $(this).html();
// console.log("i am writin second", list[$(this).attr('value')] = $(this).html());
// console.log(list[$(this).attr('id')] = $(this).html())
// });
console.log(IDs)
console.log(tts)
CSS
<style>
.ctList {
padding-top: 20px;
}
.ctList .dual-list .list-group {
margin-top: 8px;
}
.ctList .list-left li,
.list-right li {
cursor: pointer;
}
.ctList .list-arrows {
padding-top: 100px;
}
.ctList .list-arrows button {
margin-bottom: 20px;
}
.dual-list.list-left .well li.list-group-item .show {
display: none;
}
</style>
This is rendered HTML in browser if ony one li in right list . ANd if two li then another HTML will be rendered by diffrent i name coming from json and value .
point_in_first_quad
View More
<div id="point_in_first_quad" class="collapse valueDiv">
<label>tts</label> <input id="tts" type="text" value="10"><br>
<label>topic_level</label> <input id="topic_level" type="text" value="capable"><br>
<label>to_be_shown_individually</label> <input id="to_be_shown_individually" type="checkbox" checked=""> <br>
<label>check_for_geometry</label><input id="check_for_geometry" type="checkbox" checked=""><br>
</div>

Adjust your html to include classes or some other identifier, since you cannot have two elements with same ids, things like #topic_level, Probably add a class to help with selection, something like below should help
<div id="point_in_first_quad" class="collapse valueDiv">
<label class="tts-label">tts</label> <input id="tts" class="tts-value" type="text" value="10"><br>...
You added classes to element you want to use in your result.
Adjust the following to make your result object
var finalResult = [];
$('#accordion div').each(function(index, item) {
var $it = $(item);
var ob = {};
ob['name'] = $it.find('.tts-label').text();
ob['tts.value'] = $it.find('.tts-value').val();
ob['ifcheckboxcheck'] = $it.find('[type="checkbox"]').is(":checked");
finalResult.push(ob);
});
Since you have two checkbox field, add a class selector to the one you want to use in result.

Angularjs dynamic form contents

Here is my angular view,
<label class="control-label">skipColumns:</label>
<br />
<fieldset ng-repeat="skipColumn in config.skipColumns track by $index">
<input type="text" class="form-control" ng-model="skipColumn[0]" /><br />
</fieldset>
<button class="btn btn-default" ng-click="addNewSkipColumn(skipColumn)">Add SkipColumn</button>
<br />
which adds new textfield every time i click addSkipColumn button.
here is my js code:
$scope.config.skipColumns = [];
$scope.addNewSkipColumn = function (skipColumn) {
if($scope.config.skipColumns==null){
$scope.config.skipColumns=[];
}
$scope.config.skipColumns.push([]);
}
so the problem is when I display or see the structure of $scope.config.skipColumns, It gives the following output:
{
skipColumns:[["content of textfield1"],["content of textfield1"]..]
}
But what I need is,`
{
skipColumns:["content of textfield1","content of textfield1",..]
}
please help me.("content of textfield" resfers to form data)

What you need here is to change what you are pushing in config.skipColumns array. Like this:
$scope.addNewSkipColumn = function(skipColumn) {
$scope.config.skipColumns.push("");
}
And, ng-repeat would be like:
<fieldset ng-repeat="skipColumn in config.skipColumns track by $index">
<input type="text" ng-model="config.skipColumns[$index]" />
</fieldset>
(why did I not use skipColumn directly in the ng-model?)
Here's working example:
angular.module("myApp", [])
.controller("ctrl", function($scope) {
$scope.config = {};
$scope.config.skipColumns = [];
$scope.addNewSkipColumn = function(skipColumn) {
$scope.config.skipColumns.push("");
}
})
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="myApp" ng-controller="ctrl">
<label class="control-label">skipColumns:</label>
<br />
<fieldset ng-repeat="skipColumn in config.skipColumns track by $index">
<input type="text" class="form-control" ng-model="config.skipColumns[$index]" />
</fieldset>
<button class="btn btn-default" ng-click="addNewSkipColumn()">Add SkipColumn</button>
<br />
<br>
<pre>{{config.skipColumns}}</pre>
</body>
</html>

See this... Just push value instead of array.
var app = angular.module('angularjs', []);
app.controller('MainCtrl', function($scope) {
$scope.choices = ['choice1'];
$scope.addNewChoice = function() {
var newItemNo = $scope.choices.length+1;
$scope.choices.push('choice'+newItemNo);
};
$scope.removeChoice = function() {
var lastItem = $scope.choices.length-1;
$scope.choices.splice(lastItem);
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div ng-app="angularjs" ng-controller="MainCtrl">
<fieldset data-ng-repeat="choice in choices">
<select>
<option>Mobile</option>
<option>Office</option>
<option>Home</option>
</select>
<input type="text" ng-model="choice.name" name="" placeholder="Enter mobile number">
<button class="remove" ng-show="$last" ng-click="removeChoice()">-</button>
</fieldset>
<button class="addfields" ng-click="addNewChoice()">Add fields</button>
<div id="choicesDisplay">
{{ choices }}
</div>
</div>

How to change ng-init value with function?

Here is my Html and JavaScript code and I want to change it through function.
Html:
<div class="container" ng-app="myApp" ng-controller="myController">
<h2>{{title}}</h2>
<ul ng-init="initItems()">
<li ng-repeat="item in items">
<input ng-model="item.name" type="text"/>
<div ng-if="makeVisible == item.id && makeVisible !='' ">
<input ng-model="newname" type="text"/>
<button ng-click="hideme(item.id); rename()" type="button">
<span class="glyphicon glyphicon-ok">
</span>
</button>
<button ng-click="hideme(item.id)" type="button">
<span class="glyphicon glyphicon-remove">
</span>
</button>
</div>
<input ng-click=" showme( item.id)" type="button" value="Rename"/>
</li>
</ul>
</div>
JavaScript:
function item(id, name) {
this.id = id;
this.name = name;
};
angular.module('myApp', []).controller('myController', function($scope) {
$scope.items = [];
$scope.makeVisible = "";
$scope.initItems = function() {
$scope.items.push(new item("0", 'Vikash'));
$scope.items.push(new item("1", 'Kumar'));
$scope.items.push(new item("2", 'Vishal'));
$scope.items.push(new item("3", 'Ajay'));
};
$scope.renameThis = function(index, oldValue) {
console.log("oldValue==" + oldValue);
console.log("indexx==" + index);
var id = 'box-' + index;
console.log("Id : " + id);
document.getElementById(id).style.display = "block";
console.log('jai hind');
};
$scope.showme = function(id) {
$scope.makeVisible = id;
console.log('id', id);
};
$scope.hideme = function(id) {
console.log(item);
$scope.makeVisible = "";
};
$scope.title = 'Enter new name here';
$scope.rename = function() {
$scope.item.name = $scope.newname;
console.log('dfasdd');
};
});
Here is value in ng-init which is showing in input box 1 and I want to change it with value of second input box on click. how can I do this?
I also add a function on button.

add visible attr in item,
function item(id, name) {
this.id = id;
this.visible=false;
this.name = name;
}
and change show and hide function to this code
$scope.hideme = function(item) {
item.visible=false;
};
$scope.showme = function(item) {
item.visible=true;
};
and change this code
<div ng-if="makeVisible == item.id && makeVisible !='' ">
to:
<div ng-if="item.visible">
and send item object to shomme and hideme function
<input ng-click="showme(item)" type="button" value="Rename"/>
<button ng-click="hideme(item); rename()" type="button">
<span class="glyphicon glyphicon-ok">
</span>
</button>
<button ng-click="hideme(item)" type="button">
<span class="glyphicon glyphicon-remove">
</span>
</button>

As I understand, you want to change value of first input box (item.name) with value of second input box (newname) by function rename triggered on-click (lets say Rename button).
Solution for that is to pass item and newname to function.
Simplified HTML:
<ul ng-init="initItems()">
<li ng-repeat="item in items">
<input ng-model="item.name" type="text" />
<input ng-model="newname" type="text" />
<input ng-click="rename(item, newname)" type="button" value="Rename" />
</li>
</ul>
Controller:
$scope.rename = function(item, newname_) {
item.name = newname_;
};
See working http://jsfiddle.net/vp2r52pb/

As you are using ng-if the newname model will be available only when an item is in rename mode.
So, you can do like this:
function item(id, name) {
this.id = id;
this.name = name;
};
angular
.module('myApp', [])
.controller('myController', function($scope) {
$scope.items = [];
$scope.makeVisible = '';
$scope.title = 'Enter new name here';
$scope.initItems = function() {
$scope.items.push(new item('0', 'Vikash'));
$scope.items.push(new item('1', 'Kumar'));
$scope.items.push(new item('2', 'Vishal'));
$scope.items.push(new item('3', 'Ajay'));
};
$scope.showme = function(id) {
$scope.makeVisible = id;
};
$scope.hideme = function(id) {
$scope.makeVisible = '';
};
$scope.rename = function(item, newname) {
item.name = newname;
};
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="container" ng-app="myApp" ng-controller="myController">
<h2>{{title}}</h2>
<ul ng-init="initItems()">
<li ng-repeat="item in items">
<input ng-model="item.name" ng-disabled="true" type="text"/>
<div ng-if="makeVisible === item.id && makeVisible !== ''">
<input ng-model="newname" type="text" />
<button ng-click="hideme(item.id); rename(item, newname);" type="button">
<span class="glyphicon glyphicon-ok"></span>
</button>
<button ng-click="hideme(item.id)" type="button">
<span class="glyphicon glyphicon-remove"></span>
</button>
</div>
<input ng-if="makeVisible !== item.id" ng-click="showme(item.id)" type="button" value="Rename"/>
</li>
</ul>
</div>

How to get value that was passed to a bootstrap modal in AngularJS

I'm trying to implement a Todo list using Angular JS and connecting it with MySQL and PHP. I have a working code where the button used to open a modal passes a php variable to that modal. I have placed that value in a hidden input field (int the modal). Now, I want to get that value so I can use it AngularJS because I will pass it again through AJAX in a separate PHP page. The thing is, it always returns undefined. Where am I going wrong with this?
JQuery code to pass the php variable and value to the modal:
<script>
$(document).ready(function(){
$('#editModal').on('show.bs.modal', function (e) {
var id = $(e.relatedTarget).data('id');
$("#new-taskID").val(id); // e.g. 3
});
});
</script>
'EditModal' (the form inside the Bootstrap Modal)
<form class="cmxform" id="editTask" name="dasd" onsubmit="return false" method="post" action="" role="form">
<div class="col-md-12">
<div ng-app>
<div id="todoapp" ng-controller="TodoCtrl">
<div class="form-group form-animate-text" style="margin-top:15px !important;">
<input type="text" class="form-text" id="new-todo" ng-model="todoText" name="allotted_time_edit" ng-keyup="addTodo()" required>
<span class="bar"></span>
<label>What needs to be done?</label>
<input type="hidden" class="form-text" id="new-taskID" value = "" name="new-taskID" required> //the passed value is placed here
</div>
<section id="main" style="display: block;">
<div ng-show="isTodo()">
<input id="toggle-all" type="checkbox" ng-model="markAll" ng-click="toggleMarkAll()"/>
<label for="toggle-all">Mark all as complete</label>
</div>
<ul id="todo-list" class="unstyled">
<li ng-repeat="todo in todos" ng-dblclick="toggleEditMode()">
<div class="view" ng-keyup="editTodo()">
<input type="checkbox" ng-model="todo.done"/>
<span class="done-{{todo.done}}" >{{todo.text}}</span>
</div>
<input class="edit" type="text" ng-model="todo.text" ng-keyup="editOnEnter(todo)"/>
</li>
</ul>
</section>
<footer style="display: block;">
<div class="todo-count">{{remaining()}} of {{todos.length}} remaining</div>
<a id="clear-completed" ng-click="clear()" ng-show="hasDone()">
Clear <span >{{(todos.length - remaining())}} {{itemText()}}</span>.</a>
</footer>
</div>
</div>
</div>
<center>
<button id="send" type="submit" class="btn btn-primary" name="dasd">Update</button>
<button type="button" class="btn btn-danger"data-dismiss="modal">Cancel</button>
</center>
</form>
AngularJS Code
<script>
function TodoCtrl($scope, $http) {
$scope.todos = [];
$scope.markAll = false;
$scope.addTodo = function(item) {
var name = $scope.todoText;
var id = document.getElementById('new-taskID').val;
alert(id); //return undefined
if(event.keyCode == 13 && name){
$http.post("ajax-search/add_checklist.php?item="+name).success(function(data){ $scope.todos.push({text:$scope.todoText, done:false});
$scope.todoText = '';
});
}
};
$scope.isTodo = function(){
return $scope.todos.length > 0;
}
$scope.toggleEditMode = function(){
$(event.target).closest('li').toggleClass('editing');
};
$scope.editOnEnter = function(todo){
if(event.keyCode == 13 && todo.text){
$scope.toggleEditMode();
}
};
$scope.remaining = function() {
var count = 0;
angular.forEach($scope.todos, function(todo) {
count += todo.done ? 0 : 1;
});
return count;
};
$scope.hasDone = function() {
return ($scope.todos.length != $scope.remaining());
}
$scope.itemText = function() {
return ($scope.todos.length - $scope.remaining() > 1) ? "items" : "item";
};
$scope.toggleMarkAll = function() {
angular.forEach($scope.todos, function(todo) {
todo.done =$scope.markAll;
});
};
$scope.clear = function() {
var oldTodos = $scope.todos;
$scope.todos = [];
angular.forEach(oldTodos, function(todo) {
if (!todo.done) $scope.todos.push(todo);
});
};
}
</script>
I really need to get the value but it returns undefined. Your help will be much appreciated. Thank you so much!!

adding a textbox element dynamically to a form by AngularJS

How can we add a textbox element to a form dynamically using AngularJs. For example in this case, I have a text and textbox which I want to add one other of this pair by clicking on a button using AngularJs.
<div ng-app>
<div ng-controller="ClickToEditCtrl">
<div ng-hide="editorEnabled" ng-click="editorEnabled=true">
{{title}}
</div>
<div ng-show="editorEnabled">
<input ng-model="title">
<button href="#" ng-click="editorEnabled=false">Done editing</button>
</div>
</div>
</div>
<div>
<input type="text" placeholder="Enter answer">
</div>

I implemented it myself. You could dynamically add an element by using ng-repeat in a
<li ng-repeat="elemnt in questionelemnt">
Here it is the Demo: fiddle

js file
$scope.choices = [{id: 'choice1'}, {id: 'choice2'}, {id: 'choice3'}];
$scope.addNewChoice = function() {
var newItemNo = $scope.choices.length+1;
$scope.choices.push({'id':'choice' +newItemNo});
};
$scope.showAddChoice = function(choice) {
return choice.id === $scope.choices[$scope.choices.length-1].id;
};
html
<div class="form-group" data-ng-repeat="choice in choices">
<label for="choice" ng-show="showChoiceLabel(choice)">Choices</label>
<button ng-show="showAddChoice(choice)" ng-click="addNewChoice()">Add another choice</button>
<input type="text" ng-model="choice.name" name="" placeholder="Enter a restaurant name">
</div>

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<ol>
<li ng-repeat="element in elements">
<input type="text" ng-model="element.value"/>
</li>
</ol>
<br/>
<b>Click here to add Textbox:</b><br/><input type="button" value="New Item" ng-click="newItem()"/>
<br/>
<br/>
<b>Click here to see ng-model value:</b><br/>
<input type="button" value="submit" ng-click="show(elements)">
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
var counter=0;
$scope.elements = [ {id:counter, value : ''} ];
$scope.newItem = function(){
counter++;
$scope.elements.push( { id:counter,value:''} );
}
$scope.show=function(elements) {
alert(JSON.stringify(elements));
}
});
</script>
</body>
</html>