I'm new to Angular, and was curious why the difference in syntax:
$log.info("Hi");
So info is a function of $log and take a parameter string.
but...
$filter('uppercase')('Hi');
Why does "Hi" outside the function?
Why not $filter('uppercase','HI')
Whats happening here?
In this case $filter is a factory method. $filter('uppercase') creates the uppercase filter, which in turn is a method. Without assigning the created method to a variable you are calling the method in place.
It's more or less a shortcut for writing
var uppercaseFilter = $filter('uppercase');
var filteredString = uppercaseFilter(originalString);
Related
Is there any way that I can get angular variable value as below syntax.?
var iNumber= "$scope.RegionLineNumber"
why you want to do this. If you want to get in string format then you can use
$scope.RegionLineNumber.toString();
You can use eval (read this and this before)
var iNumber = eval("$scope.RegionLineNumber");
however there's certainly a better way to do that. For example, if you know it's in $scope, just use
var iNumber = $scope["RegionLineNumber"];
I have a value in my view that is not updating after a service method is called.
Here is the relevant code in the controller:
$scope.remaining = 20;
AcctService.getCurrentCount.get(calculateRemaining); //This is a $resource method
function calculateRemaining(result) {
$scope.remaining -= result;
alert($scope.remaining);
}
Here is the code for .getCurrentCount:
service.getCurrentCount = $resource('/api/getCount', {}, {
'get': { method: 'GET', isArray: true }
});
With the above code, say for example the result returned is 5. "15" will be alerted. However, in the view, {{remaining}} is still 20. No errors, the view just doesn't update.
I have tried the following:
$timeout - nothing different happens
Making $scope.remaining an object with property "value". (I read in another post about issues with data binding of primitives vs references). No difference.
$promise and .then() - no difference
$apply results in a digest error
Note, I am also coding with Ionic, not sure if it makes a difference. I disabled caching in the Ionic config, and another service method that returns an array propagates an ng-repeat as expected.
Thanks!
I'm not sure what things look like inside that get() function, but it doesn't look right.
Assuming get() returns a promise, you should write it like this:
AcctService.getCurrentCount.get().then(calculateRemaining); //This is a $resource method
First of all you do not need to create get method to return array. Use default 'query' method of $resource. And first parameter for the method is an object of parameters. second one is success function. So change you service to this
service.getCurrentCount = $resource('/api/getCount');
And later use it as
AcctService.getCurrentCount.query({},calculateRemaining);
Also check if you are not using one way data binding {{::remaining}}
And also you have to make sure you are using right $scope, to check that make "remaining" a field of an object. You can do it this way:
$scope.myData = {};
$scope.myData.remaining = 20;
and later at the controller initialize it the same and at the html
{{myData.remaining}}
also you can use $scope.apply(); but actually that is used at different case
In Angular, $location.search() returns an object, which is handy to modify: add new params, alter or remove (set to null) existing ones. And $location.search(object) sets this object to the search component of $location. I'm looking for a way to get the composed query string from this object leaving the $location intact. I don't need to get the actual query string, I need to compose the query string from an object.
I don't want to reinvent the wheel and write a javascript function that transforms an object to the string of &-separated key-value pairs, Angular already has one. Basically what I'd like to do is to use toKeyValue method from Angular.js, which is used to compose query string in the $$compose function in location.js. However, it seems like toKeyValue method is inaccessible from outside Angular (unlike, for example, forEach), as I'm getting angular.toKeyValue is not a function error when trying to call it. Is there any way to call toKeyValue method from my controller or just compose the query string from an object by means of Angular?
You can use $httpParamSerializer that converts objects to strings.
This will do from your controller.
app.controller('MainCtrl', function($scope, $httpParamSerializer) {
var querystring = $httpParamSerializer({ width:1680, height:1050 }); //height=1050&width=1680
});
I'm currently developping an angular app and I have found two ways to call a function that does a simple multiplication.
First
function calcul(contexte) {
contexte.proposition.marge_theorique = contexte.proposition.marge_grille * 2;
}
and call it with
calcul($scope)
Second
$scope.dynamicChange = function () {
$scope.proposition.marge_theorique = $scope.proposition.marge_grille * 2;
}
and call it with
$scope.dynamicChange()
What is the difference between those usages?
Thanks a lot
There is no execution difference between your two approaches, but I would recommend you the second one, cause passing scope in parameter is not very usual, adds nothing, and it not allows you to use method directly in your view.
Using the second way, (I mean, the $scope.dynamicChange one), is also good cause you take profit of the Angular controllers inheritance. So every child scope of your controller scope will get this method.
Conclusion, no very difference for your specific task, but I recommend you to use the more "Angular" way.
In the example above, calling the function with dynamicChange() would throw an error, since dynamicChange() is a method of $scope and not a function.
You would need to call $scope.dynamicChange
You won't be able to call the function of the first example from within your html-templates.
So you can't just use something like.
<div>
{{myFunction()}}
</div>
In angularJS, when trying to assign a scope variable from the value of another scope variable, the value of the derived variable is empty. In the example, I'd like to have a scope reference for the car, and also for a specific car part (which may change later in the application).
Example:
$scope.car = Car.get(); //async http service that returns a JSON car object
$scope.selectedCarPart = $scope.car.brakes;
HTML:
<div>{{car.engine}} - {{selectedCarPart}}</div>
Output:
v8 -
Why is selectedCarPart empty?
I assume that you get call is async, so when you assign the selectedCarPart, your $scope.car is currently null and doesn't have yet some brakes.
You have to wait the end of your get call and assign the value of the resulting JSON car object in the success callback of your http service.
Accepted answer from Apercu is correct. You can also use more general solution which is using $watch. In that case you write this:
$scope.$watch('car',function(newValue) {
$scope.selectedCarPart = newValue['brakes'];
}, true);
More information about $watch can be found here: https://docs.angularjs.org/api/ng/type/$rootScope.Scope
Even if that would work, I think there's a better way.
<div>{{car.engine}} - {{car[selectedPartKey]}}</div>
That way, you can just change the value of selectedPartKey to 'brakes'. Your way, if car's values change, it won't be reflected...