Develop Reference

knockout.js making remove button work in two viewmodels connected in one

This is my code
<div data-bind="with: SimpleListModel">
<form data-bind="submit: addItem" >
New item:
<input data-bind='value: itemToAdd, valueUpdate: "afterkeydown"' />
<button type="submit" data-bind="enable: itemToAdd().length > 0">Add</button>
<p>Your items:</p>
<select multiple="multiple" width="50" data-bind="options: items"> </select>
</form>
</div>
<div data-bind="with: SimpleListModel2">
<ul data-bind="foreach: cardlists">
<li>
<span data-bind="text: $data"></span>
Del
</li>
</ul>
</div>
this is the viewmodel
var SimpleListModel = function(items) {
this.items = ko.observableArray(items);
this.itemToAdd = ko.observable("");
this.addItem = function() {
if (this.itemToAdd() != "") {
this.items.push(this.itemToAdd()); // Adds the item. Writing to the "items" observableArray causes any associated UI to update.
this.itemToAdd(""); // Clears the text box, because it's bound to the "itemToAdd" observable
}
}.bind(this); // Ensure that "this" is always this view model
};
var SimpleListModel2 = function(cardlists) {
var self = this;
self.cardlists= ko.observableArray(cardlists);
self.removecard = function (cardlist) {
self.cardlists.remove(cardlist);
};
};
var masterVM = (function () {
var self = this;
self.SimpleListModel= new SimpleListModel(["Alpha", "Beta", "Gamma"]);
self.SimpleListModel2= new SimpleListModel2([ "Tall Hat", "LongCloak"]);
})();
ko.applyBindings(masterVM);
This is replica in my project. The remove button stops working when i had the second viewmodel. $root.removecard is coming undefined. how can i get my $root.removecard working in this scenario with one mainviewmodel.

It works when you change $root.removecard with $parent.removecard.
var SimpleListModel = function(items) {
this.items = ko.observableArray(items);
this.itemToAdd = ko.observable("");
this.addItem = function() {
if (this.itemToAdd() != "") {
this.items.push(this.itemToAdd()); // Adds the item. Writing to the "items" observableArray causes any associated UI to update.
this.itemToAdd(""); // Clears the text box, because it's bound to the "itemToAdd" observable
}
}.bind(this); // Ensure that "this" is always this view model
};
var SimpleListModel2 = function(cardlists) {
var self = this;
self.cardlists= ko.observableArray(cardlists);
self.removecard = function (cardlist) {
self.cardlists.remove(cardlist);
};
};
var masterVM = (function () {
var self = this;
self.SimpleListModel= new SimpleListModel(["Alpha", "Beta", "Gamma"]);
self.SimpleListModel2= new SimpleListModel2([ "Tall Hat", "LongCloak"]);
})();
ko.applyBindings(masterVM);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<div data-bind="with: SimpleListModel">
<form data-bind="submit: addItem" >
New item:
<input data-bind='value: itemToAdd, valueUpdate: "afterkeydown"' />
<button type="submit" data-bind="enable: itemToAdd().length > 0">Add</button>
<p>Your items:</p>
<select multiple="multiple" width="50" data-bind="options: items"> </select>
</form>
</div>
<div data-bind="with: SimpleListModel2">
<ul data-bind="foreach: cardlists">
<li>
<span data-bind="text: $data"></span>
Del
</li>
</ul>
</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!!

How to print a new object's property value in Angular?

I'm working on a list app where initially the user is presented with an input and button. In the input the user enters the name of a new list, and after the button is clicked, an empty list appears ready for input of items. Adding a new list works, as does adding/removing list items. But the name of the list doesn't print on the page. Currently without any advanced CSS, it's expected for the lists' names to all appear at the top of the page rather than directly above their respective lists.
https://codepen.io/anon/pen/RVmeLe
HTML:
<div ng-app="notepadApp">
<div ng-controller="notepadController as notepadCtrl">
<header ng-repeat="list in notepadCtrl.lists">
<form name="removeListForm" ng-submit="notepadCtrl.removeList($index)">
<input type="submit" value="Remove list">
</form>
<h1>{{list.name}}</h1>
</header>
<div ng-repeat="list in notepadCtrl.lists" class="shoppingList" ng-controller="ItemController as itemCtrl">
<ul>
<li ng-repeat="item in list.items">
<label>
<input type="checkbox" ng-model="item.checked">
<span class="item-name-wrapper">{{item.name}}</span>
</label>
<form name="itemForm" ng-submit="itemCtrl.removeItem(list, $index)">
<input type="submit" value="remove">
</form>
</li>
</ul>
<form name="itemForm" ng-submit="itemCtrl.addItem(list)">
<input type="text" ng-model="itemCtrl.item.name">
<input type="submit" value="Add item">
</form>
</div>
<form name="addListForm" ng-submit="notepadCtrl.addList(newListName)">
<input type="text" ng-model="notepadCtrl.list.name">
<input type="submit" value="Add list">
</form>
</div>
</div>
Javascript:
(function(){
var app = angular.module('notepadApp', []);
var shoppingLists = [
];
app.controller('notepadController', function(){
var notepadCtrl = this;
notepadCtrl.lists = shoppingLists;
notepadCtrl.addList = function(newListName) {
var newList = {
name: newListName,
items:[]
};
shoppingLists.push(newList);
};
notepadCtrl.removeList = function(index) {
shoppingLists.splice(index, 1);
};
});
app.controller('ItemController', function(){
this.item = {};
this.addItem = function(list){
list.items.push(this.item);
this.item = {};
};
this.removeItem = function(list, index) {
list.items.splice(index, 1);
};
});
})();

You just want to replace:
ng-submit="notepadCtrl.addList(newListName)"
with:
ng-submit="notepadCtrl.addList(notepadCtrl.list.name)"

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