Develop Reference

detect changes in a JS Object using Angular js

I have a javascript object suppose user is the name of my object and in angular js it looks like this
$scope.user = {
name:'Arpit',
class:'Computer Science',
year:'2017',
gender:'male'
}
This object I am fetching from the database and opening in the edit screen, now if in the HTML form if any field got changed by the user in edit mode I want to highlight the particular field using my CSS class applyborder. My logic is working for the first time when I am changing any field value but when I reset the value as original the class should be removed, but it is not removing the class. My angular js code is:
//Value Change Detection
Object.keys($scope.user).filter(function (key) {
$scope.$watch('user.' + key, function (newVal, oldVal) {
if (newVal != oldVal) {
var ele = $('[ng-model="user' + '.' + key + '"]');
ele.addClass("applyborder");
}
else if(oldVal == newVal){
var ele = $('[ng-model="user' + '.' + key + '"]');
ele.removeClass("applyborder");
}
});
});
It is treating last entered value as oldVal but it should treat to the value which comes from the database. Thanks.

This is the expected behavior of $watch.
You can keep a copy of the object you received from database using angular.copy:
var originalUser = angular.copy($scope.user).
then check:
//Value Change Detection
Object.keys($scope.user).filter(function (key) {
$scope.$watch('user.' + key, function (newVal, oldVal) {
if (newVal != originalUser[key]) {
var ele = $('[ng-model="user' + '.' + key + '"]');
ele.addClass("applyborder");
}
else if(originalUser[key] == newVal){
var ele = $('[ng-model="user' + '.' + key + '"]');
ele.removeClass("applyborder");
}
});
});

Just apply it under ng-dirty class will do. You might have to isolate your css scope so it doesn't get applied everywhere.
<form class='myForm'>
<input ng-model='xx' />
</form>
.myForm .ng-dirty {
background-color: yellow;
}
If you need to reset the state, you'll need to give the form a name.
<form class='myForm' name='myForm'>
$scope.myForm.$setPristine();

AngularJS custom form validation directive doesn't work in my modal

I decided to write a custom directive to help me validate my input boxes. The idea is that I add my new fancy nx-validate directive to a bootstrap div.form-group and it'll check whether my <input/> is $dirty or $invalid and apply the .has-success or .has-error class as required.
For some odd reason, my directive works perfectly under normal circumstances, but the added ng-class is completely ignored inside a ui-bootstrap modal.
Identical code in both the modal and the form
<form name="mainForm">
<div class="row">
<div nx-validate class="form-group has-feedback col-lg-6 col-md-6 col-xs-12">
<label class="control-label">Green if long enough, red if not</label>
<input type="text" id="name" class="form-control" ng-model="property.name" required="required" ng-minlength="5"/>
(once touched I do change colour - happy face)
</div>
</div>
And my lovely directive
nitro.directive("nxValidate", function($compile) {
return {
restrict: 'A',
priority: 2000,
compile: function(element) {
var node = element;
while (node && node[0].tagName != 'FORM') {
console.log (node[0].tagName)
node = node.parent();
}
if (!node) console.error("No form node as parent");
var formName = node.attr("name");
if (!formName) console.error("Form needs a name attribute");
var label = element.find("label");
var input = element.find("input");
var inputId = input.attr("id")
if (!label.attr("for")) {
label.attr("for", inputId);
}
if (!input.attr("name")) {
input.attr("name", inputId);
}
if (!input.attr("placeholder")) {
input.attr("placeholder", label.html());
}
element.attr("ng-class", "{'has-error' : " + formName + "." + inputId + ".$invalid && " + formName + "." + inputId + ".$touched, 'has-success' : " + formName + "." + inputId + ".$valid && " + formName + "." + inputId + ".$touched}");
element.removeAttr("nx-validate");
var fn = $compile(element);
return function($scope) {
fn($scope);
}
}
}
});
Check it out on plunker: http://plnkr.co/edit/AjvNi5e6hmXcTgpXgTlH?

The simplest way I'd suggest you is you can put those classes by using watch on those fields, this watcher will lie inside the postlink function after compiling a DOM
return function($scope, element) {
fn($scope);
$scope.$watch(function(){
return $scope.modalForm.name.$invalid && $scope.modalForm.name.$touched;
}, function(newVal){
if(newVal)
element.addClass('has-error');
else
element.removeClass('has-error');
})
$scope.$watch(function(){
return $scope.modalForm.name.$valid && $scope.modalForm.name.$touched;
}, function(newVal){
if(newVal)
element.addClass('has-success');
else
element.removeClass('has-success');
})
}
Demo Here
Update
The actual better way of doing this would be instead of compiling element from compile, we need $compile the element from the link function itself. The reason behind the compiling DOM in link fn using $compile is that our ng-class attribute does contain the scope variable which is like myForm.name.$invalid ,so when we $compile the DOM of compile function then they are not evaluating value of myForm.name.$invalid variable because compile don't have access to scope & the would be always undefined or blank. So while compile DOM inside the link would have all the scope values are available that does contain myForm.name.$invalid so after compiling it with directive scope you will get your ng-class directive binding will work.
Code
compile: function(element) {
//..other code will be as is..
element.removeAttr("nx-validate");
//var fn = $compile(element); //remove this line from compile fn
return function($scope, element) {
//fn($scope);
$compile(element)($scope); //added in postLink to compile dom to get binding working
}
}
Updated Plunkr

AngularJS click to edit fields such as dropdown

I stumbled upon this article on how to build a click to edit feature for a form. The author states:
What about if you wanted input type="date" or even a select? This
is where you could add some extra attribute names to the directive’s
scope, like fieldType, and then change some elements in the template
based on that value. Or for full customisation, you could even turn
off replace: true and add a compile function that wraps the necessary
click to edit markup around any existing content in the page.
While looking through the code I cannot seem to wrap my head around how I could manipulate the template in such a way that I could make it apply to any angular component, let alone how I can make it apply to a drop down list. Code from article below:
app.directive("clickToEdit", function() {
var editorTemplate = '<div class="click-to-edit">' +
'<div ng-hide="view.editorEnabled">' +
'{{value}} ' +
'<a ng-click="enableEditor()">Edit</a>' +
'</div>' +
'<div ng-show="view.editorEnabled">' +
'<input ng-model="view.editableValue">' +
'Save' +
' or ' +
'<a ng-click="disableEditor()">cancel</a>.' +
'</div>' +
'</div>';
return {
restrict: "A",
replace: true,
template: editorTemplate,
scope: {
value: "=clickToEdit",
},
controller: function($scope) {
$scope.view = {
editableValue: $scope.value,
editorEnabled: false
};
$scope.enableEditor = function() {
$scope.view.editorEnabled = true;
$scope.view.editableValue = $scope.value;
};
$scope.disableEditor = function() {
$scope.view.editorEnabled = false;
};
$scope.save = function() {
$scope.value = $scope.view.editableValue;
$scope.disableEditor();
};
}
};
});
My question is, how can we extend the above code to allow for drop down edits? That is being able to change to the values that get selected.

One approach you might consider is using template: function(tElement,tAttrs ).
This would allow you to return appropriate template based on attributes.
app.directive("clickToEdit", function() {
return {
/* pseudo example*/
template: function(tElement,tAttrs ){
switch( tAttrs.type){
case 'text':
return '<input type="text"/>';
break;
}
},....
This is outlined in the $compile docs

how to prevent duplicated entries in javascript?

i have a problem in preventing duplicates from being entered, i'm generated radio buttons dynamically in 2 pages at the same time using exactly one button, i take the label from the user and generate a radio button from that label, i want to prevent the user from entering 2 identical labels, here's the script which generates radios for the 2 pages any help will be appreciated
function createRadioElement(elem, label, checked) {
var id = 'option1_' + label;
$('#after').append($('<input />', {
'type': 'radio',
'fieldset':'group',
'name': 'option1',
'id': id,
'data-role': 'controlgroup',
'data-theme':'b',
'value': '1'}));
$('#after').append('<label for="' + id + '">'+ label + '</label>').trigger('create');}
function createRadioFortSecondPage(elem, label, checked) {
var id = 'option1_' + label;
$('#Inserthere').append($('<input />', {
'type': 'radio',
'fieldset':'group',
'name': 'option1',
'id': id,
'data-role': 'controlgroup',
'data-theme':'b',
'value': '1'}));
$('#Inserthere').append('<label for="' + id + '">'+ label + '</label>').trigger('create');}
that's the function i wrote to prevent duplicates:
function checkDublicates(){
var isExist=true;
var x = document.getElementById('option').value;
var labels = [];
$('#after input[type=radio]').each(function() {
labels.push($('label[for='+$(this).attr('id')+']').text());
});
for(var i=0;i<labels.length;i++){
if(x==labels[i])
{
isExist=false;}
else{
isExist=true;}
}
return isExist;}
and that's the button action:
$('#AddButton').click(function(){
var exist=checkDublicates();
<!--var isEmpty=validate();-->
<!--if(exist==true){
<!--alert("Duplicates Are Not Allowed!");
<!--}else{
var y=document.getElementById('question').value
document.getElementById('headTitle').innerHTML=y;
if(exist==false){
alert("Duplicates Not Allowed!")
}else{
createRadioElement(this,$('#option').val(),true);
createRadioFortSecondPage(this,$('#option').val(),true);
}
});

Just use $.inArray(val, arr) it will work ! http://api.jquery.com/jQuery.inArray/
But just a comment concerning your code.
Replace
document.getElementById('question').value
by
$('#question').val()
and
document.getElementById('headTitle').innerHTML=y
by
$('#headTitle').html(y)
Will be much cleaner ;-)

You can use this handy function to push elements into an array and check for duplicates at the same time. It'll return true if it catches a duplicate.
var noDupPush = function (value, arr) {
var isDup = false;
if (!~$.inArray(value, arr)) {
arr.push(value);
} else {
isDup = true;
}
return isDup;
};
// You can use it like this
var arr = ['green'];
if (noDupPush('green', arr)){
// Dup exists
}
// Or else it will just push new value to array

You could generate an id that includes the text of the label and then very quickly check for the existence of an element containing that text. For example:
function generateLabelId( userinput ){
return 'awesomelabel_' + userinput.replace(/\W/g,'');
}
var label = document.getElementById(generateLabelId( userinput ));
var labelDoesNotExist = (label == undefined );
if (labelDoesNotExist){
// create your element here
// making sure that you add the id from generateLabelId
}

Need help understanding jQuery .val() function

alert("data going into $hidden: " + selected.data[1]);
hidden.val(selected.data[1]);
alert("data now in $hidden: " + $hidden.val());
What would be a reason that $hidden.val() in the last line above would return undefined? I have verified that selected.data[1] contains an integer value.
Edit #1: Some additional context per comments: ($hidden is a hidden input field)
$.fn.extend({
autocomplete: function(urlOrData, hidden, options) {
var isUrl = typeof urlOrData == "string";
var $hidden = $(hidden);
options = $.extend({}, $.Autocompleter.defaults, {
url: isUrl ? urlOrData : null,
data: isUrl ? null : urlOrData,
delay: isUrl ? $.Autocompleter.defaults.delay : 10,
max: options && !options.scroll ? 10 : 150
}, options);
// if highlight is set to false, replace it with a do-nothing function
options.highlight = options.highlight || function(value) { return value; };
// if the formatMatch option is not specified, then use formatItem for backwards compatibility
options.formatMatch = options.formatMatch || options.formatItem;
return this.each(function() {
new $.Autocompleter(this, options, $hidden);
});
and...
$.Autocompleter = function(input, options, $hidden) {
//...
function selectCurrent() {
var selected = select.selected();
if (!selected)
return false;
var v = selected.result;
previousValue = v;
if (options.multiple) {
var words = trimWords($input.val());
if (words.length > 1) {
v = words.slice(0, words.length - 1).join(options.multipleSeparator) + options.multipleSeparator + v;
}
v += options.multipleSeparator;
}
alert("data going into $hidden: " + selected.data[1]);
$hidden.val(selected.data[1]);
alert("data now in $hidden: " + $hidden.val());
Edit #2: More details.... I'm trying to use the jQuery autocomplete extension on a form with multiple textbox controls (each implement the autocomplete). There's a seperate button on the form beside each textbox that submits the form to a handler function that needs to find the value of the item selected and save it to the db. The way I thought to go about this was to include a hidden field on the form to hold the selected value.

Thanks Paolo Bergantino. I discovered that I wasn't passing the initial hidden in with a # in front of the hidden field id, so $hidden was never getting set properly. It was difficult for me to debug because the the autocomplete is inside an ascx control as an embedded resource. Once I ensured that the value of hidden was including the # it worked properly.

Could $hidden be a checkbox that is not checked?