We Keep Coding

Clone sapUi5 json model and stop binding

I have seen a similar question, but in my case it doesn't work.
I have a JSON model, called data, which corresponds to a SAPUi5 form with comboboxes. I want to copy the state of the model the first time I open my application and keep it like that. After that I want to use it to reset my form and bring the comboboxes back to their default values.
When I first start my application:
this.getView().setModel(new JSONModel(data)); //create the original model
//copy the original model (copyModel is global variable
copyModel = $.extend({}, data);
Until here everything is fine. The two models are exactly the same. After that I have a button and a reset Function:
resetP: function(){
this.getView().setModel(new JSONModel(copyModel));
console.log(copyModel);
}
The first time I select something in the comboboxes and click the reset button and run the reset function, the copymodel is the right one. Same with the original data model. When I change again the selected value of the combobx, the copyModel, starts taking the selected value. Somehow it's overwritten. I don't know what I am doing wrong. Are there any suggestions? I have also tried to use JSON.strignify instead of extend.

JSON models be default have two way binding. So when you are triggering events like selectionChange on the ComboBox, because of two way binding, the set data to the model keeps getting updated. Also Javascript has objects by reference, so it is the original copyModel object that gets updated.
You can prevent this by setting a copy of the copyModel to the JSON model.
Another thing I would like to mention is that do not keep setting the model again and again.
You can just update the data that is set to the model and update the model.
This can be done in 2 ways.
a.
resetP: function(){
this.getView().getModel().setData(copyModel);
console.log(copyModel);
}
b. You could also update the required property and do a
this.getView().getModel().updateBindings();

We use jQuery.extend(true, {}, object_to_copy); in this way to create a "deep copy" from the object we want an independed copy from.

tolowercase string Angular

Very simple issue I cant seem to resolve, my markup
<select class="testing" ng-model="Car_name" ng-options="item in categories['Car_name']">
I'm trying to change 'Car_name' to be 'car_name' however the server populated the ng-model & categories[] entries, so I'm not sure how I can watch and convert to lowercase in my controller.
If I could do
{{Car_name|lowercase}}
would be the easiest, but not sure on the format.

Option 1
You can do it by using angular.$filter option
Sample look like
<td ng-model={{ lowercase_expression | lowercase}}><td>
$filter('lowercase')()
More details Please see this angular document
Option 2
Please see this below discussion
AngularJS - ngOptions expressions
Option 3
You need to manually add a loop for your array. And convert to the object values to lower case by using toLowerCase() function , and finally push the object to new array.

This is built into AngularJS and can be access via angular.lowercase(string); and then used in your Controller like:
$scope.makeLowerCase = function(string){
return angular.lowercase(string);
};
Now use in your DOM like:
{{Car_name|makeLowerCase}}

Change how data is represented in AngularJS

I'm actually not sure how to ask this question, and I'm probably using incorrect terms, so bear with me.
Angular sets up a 2-way data binding so that it makes it easy to work with the data on both sides. But what if I want to change how that data is represented?
Let me give a concrete example.
I want a form with a checkbox, which if bound directly to a model, would be stored as true or false by Angular. However, in another part of the webpage I want that value to show up as 0 or 1, not true or false.
Now sure I could go and make them use two different variables, and use ng-change or something like that to update one based on the other, but that seems overkill and convoluted.
Is there some special meta function or something I can define that lets me essentially translate the data as it goes back and forth?

Use the ngTrueValue and ngFalseValue directives. They define what should be treated as true and false on a checkbox: https://docs.angularjs.org/api/ng/input/input%5Bcheckbox%5D
Example:
<input type="checkbox" ng-model="foo"
ng-true-value="OK"
ng-false-value="BOO-HOO">
The model will either have a value of "OK" or "BOO-HOO" instead of the default true and false in the above example.
Alternatively, if you want the original model to retain its default values and only draw the custom ones from another variable, you could also use the ngChange directive:
<input type="checkbox" ng-model="foo"
ng-change="bar=foo&&'OK'||'BOO-HOO'">
Now, whenever foo changes, bar will have the corresponding alternative value. Just remember to assign bar an initial value (it will start out with no value at all).

in your controller...
$scope.getvalue(data)
{
if(data===true)
return 1; // write what ever you want...
return 0;
}
in your html page..
bind the normal one as {{$scope.data1}} and other as {{getvalue($scope.data1)}}

You can do some nice things with ngBind:
Check this plunker: http://plnkr.co/edit/cRhLN2p5N4PmI65ps6Gp?p=preview
<input type="checkbox" ng-model="ok"> OK?
<h2>true or false: {{ ok }}</h2>
<h2>0 or 1: {{ ok ? 1 : 0 }}</h2>

Removing items from an ngList in Angular

I'm using ngList within an text box to get and post data to my server. The issue I've found is that while I can directly affect the generated array by removing indexes, when removing an item this way, the string in the input field is left unaffected.
The problem here is that as soon as the text field is modified, whatever is contained in that field immediately updates the model, restoring whatever items were removed.
http://plnkr.co/edit/EqkWwyLwvHrrhT6epOYP?p=preview
Does anyone have a solution for updating the string within the text field to match the model as the model is updated? My thought was to use an $apply either on my function or within a $watch but in both cases I got $apply in progress errors.

$scope.states.splice(index, 1);
It will not update ng-list because the change mechanism only invoked if previous value is not equal current value strictly...
So if you will create new instance instead of the splice current one nothing will be invoked because it is the same array instance so replace this code with the current one and it will be what you want...
var tmpList = angular.copy($scope.states);
tmpList.splice(index, 1);
$scope.states = tmpList;
and here is PLUNKER

Boolean Filter for checkboxes in ng-model Angular

item.imposed is either 1, or 0.
In order for a checkbox to mark as checked, the value must be true or false.
<input type="checkbox" ng-model="item.imposed">
You cannot use a filter inside of ng-model, how can this be accomplished simply and correctly?

You can use ngChecked, but you won't get any binding back to your model:
http://jsfiddle.net/fMBQj/
Or you can use ngTrueValue and ngFalseValue, but you HAVE to use a string (not an int):
http://jsfiddle.net/fMBQj/1/
Or you can use a custom directive... it's pretty lame right now.

You can use ng-value-true to tell angular that your ng-model is a string.
I could only get ng-true-value working if I added the extra quotes like so (as shown in the official Angular docs - https://docs.angularjs.org/api/ng/input/input%5Bcheckbox%5D)
ng-true-value="'1'"