Angular input inside of directive - javascript

I have an angular directive that I'm building with some pagination controls.
<div>
<!-- table logic here -->
</div>
<div>
<button bg-click="current=prevPage(current);">Prev</button>
<input ng-model="current" />
/{{pages}}
<button bg-click="current=nextPage(current);">Next</button>
</div>
It works fine, but of course when you change the value in the input.
It will also pick up the empty string during the delete before you enter a new value in.
Is there a way to sniff that out in the directive before it actually fires the change in the current value.

You can just check the value of the variable current before do pagination.
I assumes that you are using $watch() to listen the change of your variable current.
code inside your directive's link,
scope.$watch("current", function(newVal, oldVal){
if(angular.isNumber(newVal)){
// your variable is a number
// Do your pagination here
}
});

ngModelOptions is useful in such a case. You could write like this
<input ng-model="current" ng-model-options="{ updateOn: 'default', debounce: {'default': 500, 'blur': 0} }" />
to delay update value to model 500ms in default and update immediately if lost focus.
That question also has been answered several times, so you should be able to find further information in the other questions.
UPDATE:
$scope.$watch(
function() {
return $scope.current;
}, function(oldVal, newVal) {
if (!newVal) {
$scope.current = oldVal
}
}
);
If oldVal is also null or an empty string, you could copy $scope.current to another scope variable (say $scope.savedCurrent) whenever newVal has a value and copy it back to $scope.current if not.

I maybe understand wrong your question.
This will update the model only when you click outside the input
<input ng-model="current" ng-model-options="{updateOn: 'blur'}" />
Or another way, when you change the input value it call a function who test if the new value is valid and set it in current.
Html :
<div>
<button bg-click="current=prevPage(current);">Prev</button>
<input type="number" ng-model="currentInput" ng-change="changeCurrent()" />
/{{pages}}
<button bg-click="current=nextPage(current);">Next</button>
</div>
Controller :
$scope.currentInput = $scope.current;
$scope.changeCurrent = function(){
if ($scope.currentInput!=""){
$scope.current = $scope.currentInput;
}
}

Related

Angularjs ng-required call function

It is possible make the required value dependet of some funcion?
Something like this? I want to do this because I want to change the required attribute to some form inputs...
HTML:
Name: <input type="text" ng-model="user.name" ng-required="isRequired('name')" />
Age: <input type="text" ng-model="user.age" ng-required="isRequired('age')" />
JS:
$scope.isRequired(fieldName){
$scope.requiredFields = [];
//$scope.requiredFields = STUFF FROM SOME REST SERVICE
for (i in requiredFields) {
if (requiredFields[i] == fieldName){
return true;
}
}
return false;
}
Updated Answer:
So based on your updated OP, what you want is certainly doable. The problem with what you were trying to do is that ng-required has no ability to execute a function, it only reads a boolean. But we can dynamically create variables based on data from the server to automatically set fields to required:
Updated Plunker
<form>
Name: <input type="text" ng-model="user.test" ng-required="name" /><br/>
<input type="text" ng-model="user.name" ng-required="age" />
<br/>
<button type="submit">Submit</button>
</form>
Note that I put a $scope property for each input in the ng-required attribute. Now we can dynamically create that $scope property and set it to true if our data says we need to:
$scope.isRequired = function(){
$scope.requiredFields = [];
$http.get('fields.json')
.success(function(data){
$scope.requiredFields = angular.fromJson(data);
console.log($scope.requiredFields.required)
for (i = 0; i < $scope.requiredFields.required.length; i++) {
$scope[$scope.requiredFields.required[i]] = true
}
console.log($scope[$scope.requiredFields.required[0]]);
})
//$scope.requiredFields = STUFF FROM SOME REST SERVICE
}
$scope.isRequired()
So it is iterating over an array of required fields received from the server, and then dynamically creating a $scope property for each one that is required, and setting it to true. Any field that has that $scope property in it's ng-required will be required now. Anything not dynamically created will just return false, and ng-required doesn't trigger.
Original answer:
Plunker
As Pratik mentioned, ng-required only accepts a Boolean value, but we can toggle the value of that with a function.
HTML
<form>
Name: <input type="text" ng-model="user.name" ng-required="isRequired" />
<br/><button ng-click="toggle()">Required: {{isRequired}}</button>
<button type="submit">Submit</button>
</form>
code:
$scope.isRequired = true;
$scope.toggle = function() {
$scope.isRequired = !$scope.isRequired;
}
I know this is a couple of years old and so AngularJS may have changed, but the accepted answer as it stands today isn't correct. You can very easily execute a function within ng-required, as it takes an expression, which can be a function. For example:
index.html
<div ng-controller="ExampleController" class="expressions">
Expression:
<input type='text' ng-model="expr" size="80"/>
<button ng-click="addExp(expr)">Evaluate</button>
<ul>
<li ng-repeat="expr in exprs track by $index">
[ X ]
<code>{{expr}}</code> => <span ng-bind="$parent.$eval(expr)"></span>
</li>
</ul>
</div>
script.js
angular.module('expressionExample', [])
.controller('ExampleController', ['$scope', function($scope) {
var exprs = $scope.exprs = [];
$scope.expr = '3*10|currency';
$scope.addExp = function(expr) {
exprs.push(expr);
};
$scope.removeExp = function(index) {
exprs.splice(index, 1);
};
}]);
In script.js, a function addExp is defined and added to the scope, and then it's called in the ng-click directive of the a tag, which also takes an expression as its argument.
This code is taken directly from the AngularJS documentation on expressions. It doesn't use ng-require directly, but any directive that takes an expression will work the same. I have used the same syntax to use a function for ng-require.

Angular: ng-model defined only when select is dirty

The issue I'm having is that I'd like to have a text input be blank while it has a defined ng-model that has a default value, then, when the input becomes dirty, I'd like that specific ng-model to be redefined. Example:
<span ng-init="level='Base'">{{level}}</span>
<input ng-model="level" placeholder="Specify Level">
Optimally, the example above would say "Base" as a default value in the span, but not in the input (so the placeholder is visible) until the input becomes dirty with the redefined 'level' value. I've tried something along these lines, but was unable to achieve what I was looking for:
<span ng-init="level='Base'">{{level}}</span>
<input ng-model="noop" ng-change="checkDirty()" name="lvl" id="lvl" placeholder="Specify Level">
// Controller code
$scope.checkDirty = function(){
if ($scope.myform.lvl.$dirty) {
angular.element("#lvl").attr("ng-model", "level")
}
}
Thanks for your time!
You don't need to have a change event to check if the form is dirty. You can directly have a condition inside the span element.
{{level ? level : 'Base'}}
Demo
var app = angular.module('app', []);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="app">
<span>{{level ? level : 'Base'}}</span>
<input ng-model="level" name="lvl" id="lvl" placeholder="Enter level">
</body>

Can I watch just one variable changing inside an array of objects in Angular JS?

I have the following variable:
var $scope.abc = [{"a":22,"b":"x"},{"a":33,"b":"y"}];
Is it possible to do a watch on this and watch for just the value of the field a changing?
Is it possible to do a watch on this and watch for just the value of the field a changing
Sure.
If you want to watch only for value a you can define ng-change for (suppose a is a input) input a.
HTML
<div ng-controller="Controller">
<div ng-repeat="val in abc">
<input type='text' ng-model='val.a' ng-change="onAChange(val.a)">
<input type='text' ng-model='val.b'>
</div>
</div>
JS
$scope.onAChange = function(mod){
console.log(mod);
};
Demo 1 Plunker
Other way, to $watch on all object abc and write "deep" watch, something like:
$scope.$watch(function () {
return $scope.abc[0].a;
},
function (newValue, oldValue) {
if(newValue == oldValue){return;}
console.log(newValue, oldValue);
}, true);
Demo 2 Plunker
As a side note:
You don't need var before $scope.abc.

AngularJS does not send hidden field value

For a specific use case I have to submit a single form the "old way". Means, I use a form with action="". The response is streamed, so I am not reloading the page. I am completely aware that a typical AngularJS app would not submit a form that way, but so far I have no other choice.
That said, i tried to populate some hidden fields from Angular:
<input type="hidden" name="someData" ng-model="data" /> {{data}}
Please note, the correct value in data is shown.
The form looks like a standard form:
<form id="aaa" name="aaa" action="/reports/aaa.html" method="post">
...
<input type="submit" value="Export" />
</form>
If I hit submit, no value is sent to the server. If I change the input field to type "text" it works as expected. My assumption is the hidden field is not really populated, while the text field actually is shown due two-way-binding.
Any ideas how I can submit a hidden field populated by AngularJS?
You cannot use double binding with hidden field.
The solution is to use brackets :
<input type="hidden" name="someData" value="{{data}}" /> {{data}}
EDIT : See this thread on github : https://github.com/angular/angular.js/pull/2574
EDIT:
Since Angular 1.2, you can use 'ng-value' directive to bind an expression to the value attribute of input. This directive should be used with input radio or checkbox but works well with hidden input.
Here is the solution using ng-value:
<input type="hidden" name="someData" ng-value="data" />
Here is a fiddle using ng-value with an hidden input: http://jsfiddle.net/6SD9N
You can always use a type=text and display:none; since Angular ignores hidden elements. As OP says, normally you wouldn't do this, but this seems like a special case.
<input type="text" name="someData" ng-model="data" style="display: none;"/>
In the controller:
$scope.entityId = $routeParams.entityId;
In the view:
<input type="hidden" name="entityId" ng-model="entity.entityId" ng-init="entity.entityId = entityId" />
I've found a nice solution written by Mike on sapiensworks. It is as simple as using a directive that watches for changes on your model:
.directive('ngUpdateHidden',function() {
return function(scope, el, attr) {
var model = attr['ngModel'];
scope.$watch(model, function(nv) {
el.val(nv);
});
};
})
and then bind your input:
<input type="hidden" name="item.Name" ng-model="item.Name" ng-update-hidden />
But the solution provided by tymeJV could be better as input hidden doesn't fire change event in javascript as yycorman told on this post, so when changing the value through a jQuery plugin will still work.
Edit
I've changed the directive to apply the a new value back to the model when change event is triggered, so it will work as an input text.
.directive('ngUpdateHidden', function () {
return {
restrict: 'AE', //attribute or element
scope: {},
replace: true,
require: 'ngModel',
link: function ($scope, elem, attr, ngModel) {
$scope.$watch(ngModel, function (nv) {
elem.val(nv);
});
elem.change(function () { //bind the change event to hidden input
$scope.$apply(function () {
ngModel.$setViewValue( elem.val());
});
});
}
};
})
so when you trigger $("#yourInputHidden").trigger('change') event with jQuery, it will update the binded model as well.
Found a strange behaviour about this hidden value () and we can't make it to work.
After playing around we found the best way is just defined the value in controller itself after the form scope.
.controller('AddController', [$scope, $http, $state, $stateParams, function($scope, $http, $state, $stateParams) {
$scope.routineForm = {};
$scope.routineForm.hiddenfield1 = "whatever_value_you_pass_on";
$scope.sendData = function {
// JSON http post action to API
}
}])
I achieved this via -
<p style="display:none">{{user.role="store_user"}}</p>
update #tymeJV 's answer
eg:
<div style="display: none">
<input type="text" name='price' ng-model="price" ng-init="price = <%= #product.price.to_s %>" >
</div>
I had facing the same problem,
I really need to send a key from my jsp to java script,
It spend around 4h or more of my day to solve it.
I include this tag on my JavaScript/JSP:
$scope.sucessMessage = function (){
var message = ($scope.messages.sucess).format($scope.portfolio.name,$scope.portfolio.id);
$scope.inforMessage = message;
alert(message);
}
String.prototype.format = function() {
var formatted = this;
for( var arg in arguments ) {
formatted = formatted.replace("{" + arg + "}", arguments[arg]);
}
return formatted;
};
<!-- Messages definition -->
<input type="hidden" name="sucess" ng-init="messages.sucess='<fmt:message key='portfolio.create.sucessMessage' />'" >
<!-- Message showed affter insert -->
<div class="alert alert-info" ng-show="(inforMessage.length > 0)">
{{inforMessage}}
</div>
<!-- properties
portfolio.create.sucessMessage=Portf\u00f3lio {0} criado com sucesso! ID={1}. -->
The result was:
Portfólio 1 criado com sucesso! ID=3.
Best Regards
Just in case someone still struggles with this, I had similar problem when trying to keep track of user session/userid on multipage form
Ive fixed that by adding
.when("/q2/:uid" in the routing:
.when("/q2/:uid", {
templateUrl: "partials/q2.html",
controller: 'formController',
paramExample: uid
})
And added this as a hidden field to pass params between webform pages
<< input type="hidden" required ng-model="formData.userid" ng-init="formData.userid=uid" />
Im new to Angular so not sure its the best possible solution but it seems to work ok for me now
Directly assign the value to model in data-ng-value attribute.
Since Angular interpreter doesn't recognize hidden fields as part of ngModel.
<input type="hidden" name="pfuserid" data-ng-value="newPortfolio.UserId = data.Id"/>
I use a classical javascript to set value to hidden input
$scope.SetPersonValue = function (PersonValue)
{
document.getElementById('TypeOfPerson').value = PersonValue;
if (PersonValue != 'person')
{
document.getElementById('Discount').checked = false;
$scope.isCollapsed = true;
}
else
{
$scope.isCollapsed = false;
}
}
Below Code will work for this IFF it in the same order as its mentionened
make sure you order is type then name, ng-model ng-init, value. thats It.
Here I would like to share my working code :
<input type="text" name="someData" ng-model="data" ng-init="data=2" style="display: none;"/>
OR
<input type="hidden" name="someData" ng-model="data" ng-init="data=2"/>
OR
<input type="hidden" name="someData" ng-init="data=2"/>

AngularJS, set class on button when input has change

I have an input field that is a filter for a long list. Next to the input field is a search icon. Basically when the user starts typing, I need to change the icon class.
I have my text field setup like so:
<input type="text" ng-change="change()" ng-model="query" />
<button class="btn"><i class="icon-search"></i></button>
Inside my controller I have defined:
$scope.change = function()
{
//change the class of button based on the length of the input field
}
Not really sure how I go about determining if there is input in the field using angular and changing the class. Am I taking the right approach here? Thanks
You can use ng-class on your ng-model
<i ng-class="{'icon-search': query.length}"></i>
Just use ngClass. Your function $scope.change should return the class name, so
<button ng-class="change()"><i class="icon-search"></i></button>
and your controller function would look something like:
$scope.change = function() {
if(something){
return "classA";
}
else{
return "classB";
}
};

Categories