On my page I show the first and last name of a person using labels.
It is then possible to edit the first and last name in a couple of input-fields. I only want to update the labels, when the user hits save, but when updating the input-fields, the labels update as well. How do I make sure, the labels are only updated on save ?
I have created a plunker here to show the issue: http://plnkr.co/edit/WSpZeifClaIL81GUI2eP?p=preview
Note that the labels change when the input is updated.
thanks
Thomas
Here is an updated plunker.
Just clone the object you are working on with angular.copy.
app.controller('MainCtrl', function($scope) {
$scope.data={first_name:"John", last_name:"Doe"};
$scope.user=angular.copy($scope.data);
$scope.staticUser=$scope.data;
This will create a deep copy of the object and therefore you won't be referencing the same object. The rest of your code works as is.
Related
I need to make 2 tables in which I can select data in one table and with submit show it in another table. Then with remove button to put it back to the first table. This is what I came up with so far. Can anyone assist me please?
<script async src="//jsfiddle.net/morka/65w7Lc96/embed/"></script>
https://jsfiddle.net/morka/65w7Lc96/
The main problem seems in your addItems function which is currently returning true or false, instead of adding items actually. You need to change your addItems function like following:
addItems: function(){
this.newItems = this.selected;
}
Also as you are just pushing names in this.selected, you have to remove .name when rendering table of newItems. You can change the code to by pushing the object in this.selected to access name ini newItems.
Check the working fiddle.
I am new to AngularJS and I am attempting to edit table data. I do not want to use a grid editor due to 508 compliance (and client preference). The preferred functionality is to click on a row and a form is populated with the row data.
The problem that I am having is when I edit data in the form it automatically updates the table data. I have separate $scope variables for the table data and the form data so I am confused as to why this is happening. This is causing all edits to automatically be saved. See below for a jsfiddle with a simplified table of my issue.
http://jsfiddle.net/sknnw5wk/
Ignore code, just in so SO does not complain about JSFiddle link, all code is in JSFiddle
$scope.editData = function (rowId) {
'use strict';
$scope.currentEditId = rowId;
$scope.managementBaselineEdit = $scope.formData.managementBaseline.operations[rowId];
}
You can avoid that behaviour by making a copy of selected object ie:
$scope.managementBaselineEdit = angular.copy($scope.formData.managementBaseline.operations[rowId]);
please see working demo here
http://jsfiddle.net/cq7v5p4o/
I am creating a web app planner using Angular and I am having some difficulties with a <select> box that is not changing value based on the variable denoted with ng-model.
My architecture is as follows:
I am using ui-router which gives me different view states, one for each page of my planner. The root HTML page has a Controller called MainController. This is where I set up my JSON model, $scope.Master = {} that I want to use throughout the planner. All pages of the planner should inherit this model and continue to modify/add to it.
I then have my 4 pages of the planner like:
Start -> Accounts -> Settings -> Review
Each page has its own Controller that gets instantiated every time I visit the page. On the Start page, I have a <select> box that has ng-model="$scope.Master.Start.selectedAccount" that gets populated dynamically using the StartController (therefore it gets populated every time I come to the Start page).
This <select> works great on the first time to the page, but if I go to Accounts and then come back, the select box is back to the default value, "Please select an account", instead of the selected account that is in the $scope.Master.Start.selectedAccount model that is bound to the <select> box
I thought I could just do something like $scope.$apply or something in order to re-apply the binding to the DOM object, but that just gave me an error saying it is already digesting.
How can I apply the binding to the <select> box after the page has been loaded 2 or more times?
This is probably because every time you go back to your original page, a new controller is instantiated since it was removed from the DOM when you left it originally. Thus $scope.Master.Start.selectedAccount. To save this, you can either
Use a service / factory singleton on the main app to save this value
https://docs.angularjs.org/guide/services#!
Save $scope.Master.Start.selectedAccount as a global variable
https://docs.angularjs.org/api/ng/service/$rootScope
Put that controller on the outside
Im real sorry... I realized I was populating the <select> using ng-repeat instead of ng-options no idea how I managed that... That was the problem
I have done a very small code on Plunkr under URL http://plnkr.co/wbVjBfpAA9WTpjEAs1GJ
I define first a Array Object which I display on a page with ng-repeat. No problem
Then on each item I add an Edit button and launch a function on ng-click
Now, I copy the selected array item into a new $scope.contractDetail and display this in the edit section (as input).
To my surprise when I start to edit the text in the input field, not only the $scope.contractDetail object gets updated but also the parent $scope.contracts.
I though I would, after edit to assign my $scontractDetail object specifically back into the $scope.contracts object at the given index.
Can somebody explain to me whta is happening here
thanks a lot
Copying your code from the plunkr to show:
angular.module('plunker', [])
.controller('MainCtrl', function($scope){
$scope.contracts = [{title: 'Master License Agreement'},{title: 'Limited Use Agreement'},{title: 'NDA'}];
$scope.editContract = function(indx){
$scope.contractDetail = $scope.contracts[indx];
}
})
Objects in JavaScript are essentially passed by reference, so when you set:
$scope.contractDetail = $scope.contracts[indx];
The two objects are the same object. When you begin to edit it, Android's dirty checking picks that up and shows the change in the other spot.
If you want to create a copy to edit (for an edit + save/cancel scenario) you can use angular.copy(obj) to create a duplicate that is not the same object.
I am trying to create a menu structure, where the nav bar contains some information that is selected in one of the menu options.
See the plunkr.
What I try to do
Initially the welcome state is loaded. In this state a check is being done to see if the user was previously on the site and already selected a city which was either stored in the cookie or local storage. I have removed that part of the code since it doesnt add anything. Now it just checks to see if a value is already set or not (which initially it never is). Then it redirects to the selection of the city. After the user clicked a city, the nav bar should be updated from "Soon in:" to "Soon in <your selected city> The content does show the selected city, however the navbar does not. Also when debugging, the controller that belongs to the nav bar controller is not called again, so probably that's where my error is, I have not set up the nesting of the views correctly, yet I can not see what I missed. Can someone shine some light on this for me please?
Regards
Ronald
The soon in section is not updated because the way you are retrieving the selected city from the service is wrong, at the point of assignin the city to your $scope, nothing is selected, change your start.nav bar controller to:
controller: ["$scope", "CityService", function ($scope, CityService) {
$scope.$watch(CityService.getCity,function(v){
$scope.data = {city : v}
},true);
and it will work, see fork.
EDIT:
Which controller do you expect to see executed again? start.nav? That one isn't called again because you are never really moving out of it, all the states you go to after your app runs are children of start.nav. The way you retrieve the selected city is wrong because that line of code only runs once, and at that point nothing is assigned to city in your service.