How to change ng-init value with function?

How to change ng-init value with function? - javascript

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>

Related

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.

Conditional ng-style not being applied

I'm somewhat new to Angular and want to do conditional styling, i've looked elsewhere and tried to replication their answers for my question but i cant get it to work.
I've made a To-Do list type of html page that has sub to-dos that I would like to be striked through when it is completed.
here is the main line:
<p ng-class="''toDoArray[$parent.$index].subItemVal.completed === 'true' && {'text-decoration': 'line-through'}">{{subItem}}</p>
The error i'm getting here is:
Error: [$parse:syntax]
here are the models:
app.controller('myCtrl',
function($scope) {
$scope.toDo = {};
$scope.toDo.value = "";
$scope.toDo.subItem = [];
$scope.toDo.subItemVal = "";
$scope.toDo.subItemVal.completed = false;
$scope.toDoArray = [];
and the full page:
<!DOCTYPE html>
<html>
<head>
<script data-require="jquery#2.2.4" data-semver="2.2.4" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script data-require="angular.js#1.5.8" data-semver="1.5.8" src="https://code.angularjs.org/1.5.8/angular.js"></script>
<link rel="stylesheet" href="style.css" />
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<form>
<div class="input-group">
<input type="text" class="form-control" id="toDoItem" placeholder="Enter your To-Do" ng-model="toDo.value" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="addToDo()">Add To Do</button>
</span>
</div>
</form>
<ul class="list-group">
<li class="list-group-item" style="margin-top: 5px;" ng-repeat="x in toDoArray track by $index">
<div class="btn-group">
<p>{{x.value}}</p>
<span ng-click="removeToDo($index)" class="glyphicon glyphicon-minus-sign"></span>
<span ng-click="showSubItem($index)"class="glyphicon glyphicon-plus-sign"></span>
</div>
<ul>
<li class="list-group-item" style="margin-top: 5px;" ng-repeat="subItem in x.subItem track by $index">
<p ng-class="''toDoArray[$parent.$index].subItemVal.completed === 'true' && {'text-decoration': 'line-through'}">{{subItem}}</p>
<span ng-click="removeSubItem($parent.$index, $index)" class="glyphicon glyphicon-remove"></span>
<span ng-click="completed($parent.$index)" class="glyphicon glyphicon-ok"></span>
</li>
</ul>
<div id="subItemPanel{{$index}}" style="margin-top: 5px;" hidden="">
<label for="subitem">SubItem: </label>
<span class="input-group">
<input type="text" id="subitem" class="form-control" ng-model="x.subItemVal"/>
<div class="input-group-btn">
<button class="btn btn-default" ng-click="addSubItem($index)" type="button">Add SubItem!</button>
</div>
</span>
</div>
</li>
</ul>
</body>
</html>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl',
function($scope) {
$scope.toDo = {};
$scope.toDo.value = "";
$scope.toDo.subItem = [];
$scope.toDo.subItemVal = "";
$scope.toDo.subItemVal.completed = false;
$scope.toDoArray = [];
$scope.completed = function(toDoIndex) {
$scope.toDoArray[toDoIndex].subItemVal.completed = true;
}
$scope.removeSubItem = function (toDoIndex, toDoSubItemIdex) {
$scope.toDoArray[toDoIndex].subItem.splice(toDoSubItemIdex, 1);
}
$scope.showSubItem = function(toDoIndex) {
$("#subItemPanel" + toDoIndex).show();
}
$scope.addSubItem = function(toDoIndex) {
$scope.toDoArray[toDoIndex].subItem.push($scope.toDoArray[toDoIndex].subItemVal);
$scope.toDoArray[toDoIndex].subItemVal = "";
debugger;
$("#subItemPanel" + toDoIndex).hide();
}
$scope.removeToDo = function(toDoItem) {
$scope.toDoArray.splice(toDoItem, 1);
}
$scope.addToDo = function() {
$scope.toDoArray.push($scope.toDo);
$scope.toDo = {};
$scope.toDo.value = "";
$scope.toDo.subItem = [];
$scope.toDo.subItemVal = "";
}
});
</script>

You are trying to apply a style where you should be applying a class. Try this:
CSS:
.todo-complete {
text-decoration: line-through;
}
HTML:
<p ng-class="{'todo-complete': toDoArray[$parent.$index].subItemVal.completed === 'true'}">{{subItem}}</p>

the error is because you have a plus quote
<p ng-class="''toDoArray[$parent.$index].subItemVal.completed === 'true' && {'text-decoration': 'line-through'}">{{subItem}}</p>
change to
<p ng-class="'toDoArray[$parent.$index].subItemVal.completed === 'true' && {'text-decoration': 'line-through'}">{{subItem}}</p>

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!!

cancel is not toggling the ngHide in angularjs

I have create unordered list where user can click and edit(update) item. I have some problem hiding/showing divs logic. I have showItem div and editItem div when user click on edit it show editItem div and hide showItem but the cancel button is not working right when user click it will hide editItem div but will not open it
html
<ul>
<li data-ng-repeat="value in model.rrnConditionsValues">
<div id="showItem" data-ng-show="!isVisible(value)">
<input class="" type="submit" value="Edit" data-ng-click="toggleVisibility(value)">
<input class="" type="submit" value="Delete" data-ng-click="deleteValue(value)">
<label>{{value.formControllerValueName}}</label>
</div>
<div id="editItem" data-ng-hide="!isVisible(value)">
<input class="" type="submit" value="update" data-ng-click="updateValue(value)">
<input class="" type="submit" value="Cancel" data-ng-click="toggleVisibility(value)">
<input type="text" size="30" data-ng-model="value.formControllerValueName" placeholder="add new here">
</div>
</li>
</ul>
javascript
$scope.updateValue = function (value) {
itemsManagementService.updateValue(value);
};
$scope.deleteValue = function (value) {
};
$scope.toggleVisibility = function (model) {
$scope.selected = model;
};
$scope.isVisible = function (model) {
return $scope.selected === model;
};
$scope.hide = function () {
return $scope.isVisible = false;
};

You could add a scope variable editingMode to store if the current item is in editing mode and also you should store the value before entering the edit mode so you can restore the old value after cancel click.
Please have a look at the demo below or in this jsfiddle.
angular.module('demoApp', [])
.controller('mainController', function ($scope) {
$scope.editingMode = [];
$scope.backup = [];
$scope.model = {
rrnConditionsValues: [{
formControllerValueName: "a"
}, {
formControllerValueName: "b"
}, {
formControllerValueName: "c"
}, {
formControllerValueName: "d"
}]
};
$scope.updateValue = function (value, index) {
//itemsManagementService.updateValue(value); // just removed for the demo
$scope.editingMode[index] = false;
};
$scope.cancel = function (index) {
$scope.model.rrnConditionsValues[index].formControllerValueName
= $scope.backup[index];
$scope.editingMode[index] = false;
};
$scope.toggleEdit = function (index) {
// save current model value so we can restore it on cancel
$scope.backup[index] = $scope.model.rrnConditionsValues[index].formControllerValueName;
console.log($scope.backup);
$scope.editingMode[index] = !$scope.editingMode[index];
//$scope.selected = model;
};
$scope.deleteValue = function(index) {
$scope.model.rrnConditionsValues.splice(index,1);
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="demoApp" ng-controller="mainController">
<ul>
<li data-ng-repeat="value in model.rrnConditionsValues">
<div id="showItem" data-ng-show="!editingMode[$index]">
<input class="" type="submit" value="Edit" data-ng-click="toggleEdit($index)">
<input class="" type="submit" value="Delete" data-ng-click="deleteValue($index)">
<label>{{value.formControllerValueName}}</label>
</div>
<div id="editItem" data-ng-show="editingMode[$index]">
<input class="" type="submit" value="update" data-ng-click="updateValue(value, $index)">
<input class="" type="submit" value="Cancel" data-ng-click="cancel($index)">
<input type="text" size="30" data-ng-model="value.formControllerValueName" placeholder="add new here">
</div>
</li>
</ul>
</div>

Since is a toggle, all you had to do is check if the model you are sending is the same as already are inside the selected. if it's , just set it to null.
$scope.toggleVisibility = function (model) {
if($scope.selected === model){
$scope.selected = null;}
else{
$scope.selected = model;
}
};
Jsfiddle of example

Highlight when add with KnockoutJS

The goal
Highlight item when I add it to another list using KnockoutJS.
The problem
I do not how to do, and yes — I have already searched on Google and Stack, but no success; no with "add".
My HTML markup:
<div class="tooltip-quantity">
<p class="float-left">Quantity:</p>
<form data-bind="submit: Summary.addToSummary">
<input class="quantity float-left" name="productQuantity"
maxlength="2"
type="text"
data-bind="value: ProductLayout.itemQuantity,
valueUpdate: 'afterkeydown'" />
<span class="float-left">/#(Model["MeasureName"])(s)</span>
<button class="btn btn-add btn-mini float-right"
data-bind="enable: ProductLayout.itemQuantityValid">
Add
</button>
<input type="hidden" name="productId" value="#Model["ProductId"]" />
<input type="hidden" name="productName" value="#Model["ProductName"]" />
<input type="hidden" name="productMeasure" value="#Model["MeasureName"]" />
</form>
</div>
My SummaryViewModel, on JS:
function SummaryViewModel() {
var self = this;
self.products = ko.observableArray();
self.addToSummary = function (formElement) {
var $productId = $(formElement).children("[name=productId]").val();
var match = $(".summary")
.find("li[data-product-id=" + $productId + "]").length;
if (!match) {
var $productName = $(formElement)
.children("[name=productName]").val(),
$productMeasure = $(formElement)
.children("[name=productMeasure]").val(),
$productQuantity = $(formElement)
.children("[name=productQuantity]").val();
self.products.push
(new Product
($productId, $productName, $productMeasure, $productQuantity));
$.ajax({
type: "POST",
url: "/ProductsSummary/Add",
data: { productId: $productId, productQuantity: $productQuantity }
});
}
}
};
Observation: addToSummary function performs what happens when I add something to a list.

Here is a working example, for which every time your add an item to a list, it is animated : here is a jsfiddle
html:
<script type="text/html" id="tmpl">
<div>
<span data-bind="text: $data"> </span>
<span> other stuff not bound </span>
</div>
</script>
<div data-bind="template: {name: 'tmpl',foreach: Data, afterRender: $root.Animate}">
</div>
<span data-bind="text: Data().length"></span>
<button data-bind="click: AddAnItemAndAnimate">AddAnItemAndAnimate</button>
Javascript :
function ViewModel() {
var self= this;
self.Data = ko.observableArray([]);
self.AddAnItemAndAnimate = function () {
//just after the push, when the elements will be visible, the function
//Animate will be call (it is linked to the afterRender of the tempalte)
self.Data.push('added');
};
self.Animate = function(elements, index, data){
// elements contains the html representing the new item
$(elements).filter('div').fadeOut().fadeIn();
};
}
var vm = new ViewModel();
ko.applyBindings(vm);

Develop Reference

JavaScript is the programming language of the Web.

How to change ng-init value with function? - javascript

Related

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

Conditional ng-style not being applied

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

cancel is not toggling the ngHide in angularjs

Highlight when add with KnockoutJS

Categories

Resources