Is there some reason when I save the input from an Angular form of checkboxes that I cannot get ng-model on the controller to become defined when I set the values on the checkboxes with ng-checked? Basically, I need to save the values in an array and if a user returns to the page it should set the form to the values stored in the array. Here is a plnkr of my code:
http://plnkr.co/edit/l1tIWwaYWsyKou64VjrO
Here is the function that ng-checked calls when the user returns to the page:
function getChecked(id) {
if (businessApp.serviceTypes.indexOf(id) > -1)
{
return true;
}
}
The list of services is stored in the array businessApp.serviceTypes.
You can do something like this. Basically it stores the checks (in the order they are displayed on the page). I added a toggle to ng-click to change the value stored in the array. I would recommend you modify your model to accommodate a more convenient way of storing the checks though, because right now your labels are sorted, so they come out a different order in the view than they are stored in the model.
Just added this to the controller:
self.checks = {
vals: [false,false,false,false,false,false,false,false,false]
}
HTML I changed/added this:
ng-checked="vm.checks.vals[$index]"
ng-model="vm.serviceType[$index]"
Demo
Related
I am facing an issue with object property changes in angular JS.
For example I have an array of objects.
$scope.ex1 = [{"name":"Ethel Price","gender":"female","company":"Enersol"},
{"name":"Claudine Neal","gender":"female","company":"Sealoud"},
{"name":"Beryl Rice","gender":"female","company":"Velity"},
{"name":"Wilder Gonzales","gender":"male","company":"Geekko"},
{"name":"Georgina Schultz","gender":"female","company":"Suretech"},
{"name":"Carroll Buchanan","gender":"male","company":"Ecosys"},
{"name":"Valarie Atkinson","gender":"female","company":"Hopeli"},
{"name":"Schroeder Mathews","gender":"male","company":"Polarium"},
{"name":"Lynda Mendoza","gender":"female","company":"Dogspa"},
{"name":"Sarah Massey","gender":"female","company":"Bisba"}]
I have a form where I show the data in a list format to display it am using angular-datatable.
When a user clicks on list items am storing that particular object in an array.
For example the user selects two items from the above list am keeping that two objects in other variable like below:
$scope.selected = [{"name":"Lynda Mendoza","gender":"female","company":"Dogspa"},
{"name":"Sarah Massey","gender":"female","company":"Bisba"}];
The issue is when I change some properties in $scope.selected the changes are reflecting automatically in $scope.ex1 object.
Like below:
$scope.selected[0].name = "Rakesh rekala"
The above change will reflect in $scope.ex1 array to that particular item.
How to restrict this scenario is there any way to solve this.
Javascript objects are mutable, use angular.copy to deep copy your source object array to a variable and then use the variable to push objects into the selected array
You should change your push line.
$scope.selected.push($scope.ex1[0]);
$scope.selected[0].name = "Test"; //ex1 will change
$scope.selected.push(angular.copy($scope.ex1[1]));
$scope.selected[1].name = "Test2"; //It's ok!
http://jsfiddle.net/ms403Ly8/124/
I've made users to enter some values in a html page:
Here is the code:
$(function() {
$("#savesymptoms").bind(
"click",
function() {
var url = "notes.html?acne="
+ encodeURIComponent($("#acne").val())
+ "&back="
+ encodeURIComponent($("#bloat").val());
window.location.href = url;
});
});
And I've added an alert like this:
alert("values passed");
But I'm not sure that this is working. I've got some 10 values to pass to another page. Above code contains only two values. Can I use arrays to pass all 10 values? I don't want to use nomenclature used in my code, i.e., individual value passing.
P.S: acne and bloat are the ids of the fields where user enters the data. notes.html is the page where I want to pass the data.
In my opinion you can use sessionStorage in HTML5
For setting a value
sessionStorage.setItem('name', 'value');
For getting the value:
sessionStorage.getItem('name');
if you want to store the value permanently use localStorage.
Since you have almost 10 values push all those values in a JSON and store it either in sessionStorage/localStorage.
You can retrieve it else where and use as per your wish
Note:values stored will be in the form of string even if you push it as JSON.You will have to make it to JSON using Jquery functions
Alternative
You can store it as window.name
But this will be only valid till the window lasts/tab closed(same as sessionStorage)
I have this function which I believe is following this process:
function verify(){
$.get("map_process.php", function (data) {
verified = $(data).find("marker").eq(-1).attr('verification');
});
}
Get data from php file/db
In the db, find the table "marker"
Find the last record in the table marker
Assign the value of the 'verification' column to the variable verified
This is doing what I want (kind of) but I need to be able to specify what record to get the 'verification' value from, but not by it's position in the table (as more records will be added and the above will just get the last record regardless). Is there another method that is kind of like .eq(x) but will allow me to specifically select a record based on another attr in that record.
eg. Say I want to find the verification value for record 1 through an event listener, and then find the verification value for record 6 through a different event listener.
I have a variable which can distinguish what row I want to get, but how can I incorporate this into the statement above. (i'm thinking instead of .eq(-1)
You can use filter() which can contain as many conditions as you need.
$.get("map_process.php", function (data) {
var myVariable = $(data).find("marker").filter(function(elementIndex, element){
return $(this).attr('someOtherAttribute') === 'valueWanted';
}).attr('verification');
});
Since I'm really not sure what the data looks like or what attribute you need the above is only a guess at how you would need to implement
See filter() API docs
I have this controller with a value.
App.xcontroller = SC.ArrayController.create({
...some code...
array_values = [],
..more code...
})
Now i have somewhere in a view this valueBinding
valueBinding: 'App.xController.array_values',
When I change values in the array the view does not get updated. but when i do
the following in the controller:
var array_values = this.get('array_values');
... adding / removing values to the array....
if (x_values.contains(x)){
x_values.removeObject(x)
} else {
x_values.pushObject(x);
};
this.set('array_values', array_values.copy());
the binding works, the view gets updated. But ONLY with the copy().
I don't want to make a copy of the array, IMHO this is not efficient. I just want to
let the valueBinding know content has changed..
the x values are just a bunch of integers.
The reason i want this: I want to change the value key of a SegmentedItemView. I want to change the active buttons. But I do not know on forehand how many segmentedviews I have
so I thought i bind the value of every generated segemented view to some common array and change that common array to be able to change the active buttons on all of the segmented views. Since each button represents an item with an unique key it works fine. except that i have to copy the array each time.
set the content property of the xcontroller
Bind to the arrangedObjects property of the xcontroller
You need to use KVO compliant methods on the array to get the bindings to fire. The ArrayController itself has an addObject and removeObject methods. Arrays in SC have been augmented with a pushObject method (among others), which is also KVO compliant. So if you use the KVO methods the view should update.
The reason your view does not update is because you are bound to the array, but the array itself did not change. When you do a copy, the array itself changes, so the bindings fire.
You might also want to try
this.notifyPropertyChange('x_values');
in the controller after you make the changes, but that is less preferable to using the built in KVO functionality.
I have a select box pull down that I'm populating with a JSON list returned from a stored procedure, but unfortunately when I update the linked object I need to return the selected text of the pulldown, not the selected index like one would think (poor database design, but I'm stuck with it for now and cannot change it).
Does anyone have any ideas what I can do to keep the selected text synced with the appropriate javascript object's attribute?
You could keep both, the value and the text, if you use subscribers.
For instance, if each of your javascript objects look like this:
var optionObject = {
text:"text1"
value: 1
}
Then your binding would look like:
Where 'OptionsObjects' is a collection of optionObject and selectedOption
has two observable properties: text and value.
Finally you subscribe to the value property of the selectedOption:
viewModel.selectedOption.value.subscribe(function(newValue){
var optionText = viewModel.OptionsObjects[newValue].text;
viewModel.selectedOption.text(optionText);
});
Then if you want to see the new selected option text when the value is changed,
you could have a binding as follows:
<span data-bind:"text:selectedOption.text"></span>
In your particular case you would return selectedOption.text().
So yes, you got what I was getting at. Use the text as the value for the select options rather than using an index. The value really should be something useful, I can't think of any case where I've ever used an index. A number sure, but a number that relates to the application's models in some way (like an id from a database), not to the number of items in the select box.
Well done.