Develop Reference

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

Nested foreach binding not displaying correctly

I'm trying to display an observableArray within an observableArray.
It's a simple ToDo list where the tasks are assigned to certain people and I want to display each persons tasks in there own div.
I'm using knockoutjs 3.3.0
Why aren't the Tasks showing up under the person?
Here's my HTML:
<div>
<form data-bind="submit: addPerson">
<p>New Person: <input data-bind='value: personToAdd, valueUpdate: "afterkeydown"' />
<button type="submit" data-bind="enable: personToAdd().length > 0">Add</button>
</p>
</form>
<form data-bind="submit: addTask">
<p>New Task: <input data-bind='value: taskToAdd, valueUpdate: "afterkeydown"' />
<select data-bind="options: people, optionsText: 'name', value:selectedPerson"></select>
<button type="submit" data-bind="enable: taskToAdd().length > 0">Add</button>
</p>
<fieldset>
<legend>Tasks</legend>
<div data-bind="foreach: people">
<div style="float: left; padding-right: 20px;">
<label data-bind="text: name" />
<div data-bind="foreach: tasks">
<input type="checkbox" data-bind="checked: done" />
<label data-bind="text: description, style: { textDecoration: done() ? 'line-through' : 'none' }" />
</div>
</div>
</div>
</fieldset>
</form>
</div>
Here's my javascript:
var ToDoList = function (people) {
var self = this;
self.taskToAdd = ko.observable("");
self.personToAdd = ko.observable("");
self.selectedPerson = ko.observable("");
self.people = ko.observableArray(people);
self.addTask = function () {
if (self.taskToAdd() != "") {
var person = ko.utils.arrayFirst(self.people(), function (item) {
return item.name() === self.selectedPerson().name();
});
person.addTask(new Task(self.taskToAdd(), person.name()));
self.taskToAdd("");
}
};
self.addPerson = function () {
if (self.personToAdd() != "") {
self.people.push(new Person(self.personToAdd()));
self.personToAdd("");
}
}.bind(self);
};
var Task = function (task, assignee) {
var self = this;
self.task = ko.observable(task);
self.assignee = ko.observable(assignee)
self.done = ko.observable(false);
self.description = ko.pureComputed(function () {
return self.task() + " (Assigned to: " + self.assignee() + ")";
}, self);
};
var Person = function (name, tasks) {
var self = this;
self.name = ko.observable(name);
self.tasks = ko.observableArray(tasks);
self.addTask = function (task) {
self.tasks.push(task);
}.bind(self);
};
ko.applyBindings(new ToDoList());

The reason the tasks are not appearing is because your <label> tags are not closed correctly. Instead of <label data-bind="blah"/>, use <label data-bind="blah"></label>.
The tasks container is not currently rendering at all, and therefore not parsed by knockout.
To be more clear, the label with data-bind="text: name" is not closed properly AND has a text binding. The text binding is replacing the entire tasks container with the name of the person. There are two instances of this error in your sample.

I Can't get the most simple knockout.js sample to work?

I have tried this code but this not working properly. my code is below
<link href="~/Content/knocktest.css" rel="stylesheet" />
<script src="~/Scripts/knockout-2.3.0.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
var ViewModel = function (first, last) {
this.firstName = ko.observable(first);
this.lastName = ko.observable(last);
this.fullName = ko.computed(function () {
return this.firstName() + " " + this.lastName();
}, this);
};
ko.applyBindings(new ViewModel("Planet", "Earth"));
});
</script>
my html code below
<p>First name: <input data-bind="value: firstName" /></p>
<p>Last name: <input data-bind="value: lastName" /></p>

You have no errors in your code, so really the only thing that you are missing is your reference to the jQuery library since you are using;
$(document).ready(function () {
// rest of your code here
});
If you don't include jQuery then you can just remove the $(document).ready() code, and make sure that your JavaScript is after all of your html elements within the body.
<p>First name: <input data-bind="value: firstName" /></p>
<p>Last name: <input data-bind="value: lastName" /></p>
<span data-bind="text: firstName"></span>
<span data-bind="text: lastName"></span>
<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.2.1/knockout-min.js"> </script>
<script>
var ViewModel = function (first, last) {
this.firstName = ko.observable(first);
this.lastName = ko.observable(last);
this.fullName = ko.computed(function () {
return this.firstName() + " " + this.lastName();
}, this);
};
ko.applyBindings(new ViewModel("Planet", "Earth"));
</script>
Please check out this demo of your code at jsbin

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

display ko.observable with html binding

Check out this fiddle: http://jsfiddle.net/XuMzS/4/
html:
<input data-bind="value: Total" type="text" />
<textarea cols="50" rows="10" data-bind="value: testHtml, valueUpdate: 'afterkeydown'">
</textarea>
<p>Html:</p>
<div class="wrapper">
<div data-bind="html: testHtml"></div>
<br />
</div>
javascript:
function viewModel() {
var self = this;
self.Total = ko.observable("1337");
self.testHtml = ko.observable();
}
ko.applyBindings(new viewModel());
What I am trying to do is to display the observable Total by writing the code that is needed inside the textarea (which displays html in the div below it).
Like if I wrote:
<span data-bind="text: Total"></span>
But nothing is displayed if I write that code in. Otherwise normal html is working.
Is there some way you can do this?

I made a sample, I think this is what you are looking for.
function viewModel() {
var self = this;
self.Total = ko.observable("1337");
self.testHtml = ko.observable("<b>test</b><span data-bind=\"text: Total\"></span>");
self.testHtmlWrapper = ko.computed(function () {
return '<div id="dynamicContent">' + self.testHtml() + '</div>';
});
self.rebind = function () {
try {
ko.applyBindings(self, document.getElementById("dynamicContent"));
} catch (e) {
}
};
self.testHtml.subscribe(self.rebind);
}
var vm = new viewModel();
ko.applyBindings(vm);
vm.rebind();
See Fiddle
I hope it helps.

Why do you need the testHtml observable?
This can easily be accomplished using the code below.
Viewmodel:
function viewModel() {
var self = this;
self.Total = ko.observable("1337");
}
ko.applyBindings(new viewModel());
Html:
<input data-bind="value: Total" type="text" />
<textarea cols="50" rows="10" data-bind="valueUpdate: 'afterkeydown'">
<b>test</b><span data-bind="text: Total"></span>
</textarea>
<p>Html:</p>
<div class="wrapper">
<div><b>test</b><span data-bind="text: Total"></span></div>
<br />
</div>
See this fiddle