I am referencing a value in my controller that may be a string or an array. If it's an array, I want to use "ng-repeat" (probably) to list out my items.
If it's a string, I just want to display the string.
Something like:
<div>
{{if is array}}
<span ng-repeat="v in myvalue">{{v}}</span>
{{else}}
{{myvalue}}
{{endif}}
</div>
I'm wondering if there's an elegant way to do this in Angularjs that I'm simply not yet familiar with.
Thanks
There is angular.isArray method. You can use that. You need to place it in the the scope or vm:
$scope.isArray = angular.isArray
And in HTML
<span ng-repeat="v in myvalue" ng-if="isArray(myvalue)">{{v}}</span>
<span ng-if="!isArray(myvalue)">{{myvalue}}</span>
If you are using it in more than one place, best is to go for a directive.
Do the logic on the controller (assign to a different variable for array and string) - then just do the dumb logic in the view:
if (Array.isArray($scope.myvalue)) {
$scope.myArray = $scope.myvalue;
} else {
$scope.myString = $scope.myvalue;
}
And the view
<div>
<div ng-if="myArray">
<span ng-repeat="v in myArray">{{v}}</span>
</div>
<div ng-if="myString">
{{myString}}
</div>
</div>
make a simple getter
$scope.getVal = function( vals ){
if(Array.isArray(vals)) return vals
else return [ vals ]
}
then instead of ng-if AND ng-repeat just use the repeater as you normally would.
<div ng-repeat="val in getVal(vals)"> {{ val }} </div>
Related
<div (ng-repeat='item in items') >
{{item.name}} //works
{{item["name"]}} // works
</div>
how do i repeat item[property] dynamically without using ".name" or ['name']?
To dynamically go through properties, you're going to need to call Object.keys(item) and then iterate through them. It's best to prune your data from within your controller, to minimize the finagling you'll need to do within your HTML.
If you do want to try to do this within your HTML-Angular structures, you could define:
$scope.returnAllKeyValues = function(obj){
var x = Object.keys(obj),
arr = [];
for(var i = 0; i<x.length; i++){
arr.push(obj[x[i]]);
}
return arr;
}
What this function does is it takes in your JSON object, then parses through it and collects all the values for every key within it.
Then, within your HTML, you can write something like this:
<h3>FIFA Mactch Summary:</h3>
<div ng-app ng-controller="MyCtrl">
<ul>
<li ng-repeat="item in items">
<span ng-init="keyValues = returnAllKeyValues(item)">
<span ng-repeat="keyValue in keyValues">{{key}} </span>
</span>
</li>
</ul>
</div>
Here you see, within your original ngRepeat, we initialized the array keyValues with all the values from item's keys via the function defined above. Then, ng-repeat through that, and you have everything printed without knowing what they are.
Here is a Fiddle with it working:
http://jsfiddle.net/RkykR/2771/
This was what i was looking for....Thanks
https://www.codementor.io/debugging/4948713248/request-want-to-use-values-in-nested-ng-repeat
Hej, how do I show only the first number that evaluates to true inside ng-repeat?
In my directive (or controller) I have:
ctrl.things = [1,2,3,4,5,6];
and in my html:
<div ng-repeat='thing in ctrl.things' >
<span ng-if="thing>3" ng-show="$first">{{thing}}</span>
</div>
How do I display only 4 as a result?
Please bear in mind that this example is simplified. There is actually an ng-repeat inside ng-repeat and because of that (and other things) there are not many things I co do inside the directive (controller). Many thanks for any solution.
Declare a method in the scope
$scope.getData=function(obj){
return obj > 3;
}
Then add this as filter in div
<div ng-repeat='thing in things | filter : getData' ng-if="$first">
<span >{{thing}}</span>
</div>
JSFIDDLE
If wanna to use this
Try like this
Declare a method in the scope
vm.getData=function(obj){
return obj > 3;
}
Then add this as filter in div
<div ng-repeat='thing in vm.things | filter : vm.getData' ng-if="$first">
<span >{{thing}}</span>
</div>
JSFIDDLE
You should have to create a filter or inline it like this:
<div ng-repeat='thing in ctrl.things' ng-if="thing > 3">
<span ng-if="$first">{{thing}}</span>
</div>
That should work
I think you are looking for this:
//controller
$scope.ctrl={};
$scope.ctrl.things=[{1:false},{2:false},{3:false},{4:true},{5:true}];
$scope.check=function(value){
$scope.count = value === true?($scope.count+1):$scope.count;
return $scope.count ===1 ;
}
//end of controller
HTML
<div ng-repeat='(key,value) in ctrl.things' >
<span ng-if="check(value)">{{key}}</span>
</div>
To show first element if you want to show last item you can put ng-if="$last"
I was trying to display some content using ng-switch:
<div ng-app ng-controller="ctrl" >
<div ng-repeat="list in statusList">
<p ng-switch on="list">
<span ng-switch-when="incorrect">
i am incorrect
</span>
<span ng-switch-when="stuff">
i am stuff
</span>
<span ng-switch-when="wrong">
i am wrong
</span>
<span ng-switch-default>
Correct
</span>
</p>
</div>
</div>
controller
function ctrl($scope){
$scope.statusList=["incorrect","wrong","stuff"];
}
Getting the output like this:
i am incorrect
i am wrong
i am stuff
But I need output to display in order what I specified. i.e.
i am incorrect
i am stuff
i am wrong
How can I do this, and one important point is we should not change the order in controller.
You can create custom order by function, something like this.
<div ng-repeat="list in statusList | orderBy:myValueFunction">
You can order it alphabetically (with filter), but I would not recommend it because you will probably add new element that are not ordered alphabetically.
ng-repeat iteration uses the order of your list. You can either define a custom filter to order the list as you want or use another approach:
Define a 'contains' filter, returning true if an array contains an element:
.filter('contains', [function() {
return function(array, element) {
return array.indexOf(element) > -1;
}
}])
Use ng-ifs for your template (no repeat):
<div ng-if="statusList | contains : 'incorrect'">i am incorrect</div>
<div ng-if="statusList | contains : 'stuff'">i am stuff</div>
<div ng-if="statusList | contains : 'wrong'">i am wrong</div>
This way you can define whatever order you want to have.
Plunkr: http://plnkr.co/edit/yaYodJAVCVQ55KbOrf3A?p=preview
I'd like to do something like this. The use case is I am showing a table with a configurable set of columns, each of which may have a filter associated with it. See this fiddle.
<div ng-app="">
<div ng-controller="MyCtrl">
{{money | filterStr}}
</div>
</div>
function MyCtrl($scope) {
$scope.money = 33;
$scope.filterStr = 'currency:"USD$"';
}
So as you can see, I basically want to store the filter string text as a scope variable, and then refer to it in the html by its name. This doesn't work, but is there a way to do something like this?
If you absolutely needed to save a reference to the filter dynamically within your controller $scope, you could create a reference to the filter function within a controller variable and then call it in the HTML like you would any other function or you could run the filter on your data in your controller and save the output to a variable. Here are two examples of doing this with the currency filter (JS Fiddle here):
<div ng-app="">
<div ng-controller="MyCtrl">
{{ moneyWithFilter }}
{{ currencyFilter(money, "USD$") }}
</div>
</div>
function MyCtrl($scope, currencyFilter) {
$scope.money = 33;
$scope.moneyWithFilter = currencyFilter($scope.money, "USD$");
$scope.currencyFilter = currencyFilter;
}
Notice that you have to append the string 'Filter' to the desired filter in order to inject it into your controller. You can read more about that here. I hope this helps!
I do something like this with
<a ng-click="setCurrent(m)">
{{m.name}}
</a>
<p ng-repeat="L in List | filter:current.name">
<a ng-click="add(w)">
{{w.Name}}
</a>
</p>
Then
function setCurrent(m) {
$scope.current = m;
}
I am new to AngularJS and i dont know is it possible to delete all scope variables of a controller.I am using ng-controller with ng-repeat, like this.
<div ng-controller="main">
<div ng-repeat="x in list" ng-controller="test">
<input type="text" ng-model="text">
<span ng-click="remove($index)"> x </span>
<div>
</div>
JS
myapp.controller('main',function($scope){
$scope.list=[1,2,3,4]
})
myapp.controller('test',function($scope){
$scope.text="untitiled"
})
I want to remove the clicked scope.Can anyone help me or please suggest me a better way. Thanks
The question isn't very clear, but it looks like you may want to remove the item after clicking. Since you are passing into the remove function the index, you can splice it out. The DOM will autoupdate and remove that from the list:
$scope.remove = function(i) {
$scope.list.splice(i,1);
console.log($scope.list);
}
In the event you are doing something different in that you only want to hide it, you would push the index onto another array and then use something like ng-show or ng-hide.
$scope.remove2 = function(i) {
$scope.hideList.push(i);
}
$scope.shouldHide = function(i) {
return $scope.hideList.indexOf(i)!=-1;
}
<div ng-repeat="number in list2" >
{{number}}
<span ng-hide='shouldHide($index)' ng-click="remove2($index)"> x </span>
</div>
Here is a simple example of both scenarios. In real life, usually we are dealing with arrays of objects and what you might be doing is setting a property on one of the objects to hidden and controlling it that way.
Demo: http://plnkr.co/edit/G7UINKUCBJ4yZhQNtuJ2?p=info
If you actually want to remove all the keys from the scope:
function removeKeys() {
for(key in $scope) {
if (key.substr(0,1)!='$' && key!='this')
delete $scope[key];
}
}