We Keep Coding

How to display last part of string containing multiple dots inside ng repeat?

Below are my list of items :
$scope.items = [
{id=1,name:'code.lmn.1234.Lodashjs'},
{id=2,name:'xyz.Suv.Angularjs'},
{id=3,name:'www.kius.reactjs'}
]
Now I want to display last part of name so expected output is like below :
Lodashjs
Angularjs
reactjs
I don't want to create filter for this as that will impact performance. So is there any way to do this without filter?
var app = angular.module("myApp", []);
app.controller("myController", function ($scope) {
$scope.items = [
{id:1,name:'code.lmn.1234.Lodashjs'},
{id:2,name:'xyz.Suv.Angularjs'},
{id:3,name:'www.kius.react.js'}
]
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myController">
<div ng-repeat="item in items">
<span >{{item.name}}</span>
</div>
</div>

Try this:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myController">
<div ng-repeat="item in items">
<span >{{ item.name.split('.').reverse()[0] }}</span>
</div>
</div>

Yes it's so simple.
Just copy paste the below code:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myController">
<div ng-repeat="item in items">
<span >{{(item.name).substr((item.name).lastIndexOf('.') + 1, (item.name).length)}}</span>
</div>
</div>

You can also use directive that will manipulate the name and return string after last "." dot.
<div ng-repeat="item in items" my-directive my-directive-fn="item.name">
app.directive("myDirective", function(){
return {
scope: {
"myDirectiveFn": "="
},
link: function(scope){
scope.myDirectiveFn.match(/([^.]+)$/);
}
}
});

How to repeat an angular element starting on index 1?

I want my ng-repeat to start after position 1, so I did this, but it doesn't work. Should I crop the array before painting it or is there a native way to do this?
var myapp = angular.module("myapp", [])
.controller("MainController", control_fun);
function control_fun() {
this.items = ["position 0", "position 1", "position 2", "position 3"];
};
<div ng-app="myapp">
<div ng-controller="MainController as ctrl">
<div ng-repeat="item in ctrl.items | filter: item > 1">{{item}}</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

If your are running angular >= 1.4.0, you can use limitTo : limit: begin filter
<div ng-repeat="item in ctrl.items | limitTo : ctrl.items.length : 1}}</div>
Check this plnkr

You can slice the array and use rest to iterate
<div ng-repeat="item in ctrl.items.slice(1) track by $index">
Demo:
var myapp = angular.module("myapp",[])
.controller("MainController", control_fun);
function control_fun(){
this.items = ["position 0", "position 1", "position 2", "position 3"];
};
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myapp">
<div ng-controller="MainController as ctrl">
<div ng-repeat="item in ctrl.items.slice(1) track by $index">{{item}}</div>
</div>
</div>

AngularJS Filter by ID

I have the following Json_encode FRom PHP Response...
[
{"ID":"149","IDusr":"4","aut_more_info":"good","doc_name":"img1838142879.jpeg","doc_type":"jpg"},{"ID":"149","IDusr":"4","aut_more_info":"good","img5733250433.jpeg","doc_type":"jpg"},{"ID":"149","IDusr":"4","aut_more_info":"good","doc_name":"img1230306801.jpg_doc","doc_type":"jpg"}
]
And I have tried the https://github.com/a8m/angular-filter Plugin. Here is my code.
<div ng-repeat="(key, value) in Detail | groupBy: 'ID'">
<div ng-repeat="aut in value">
<div class="item item-avatar bar bar-calm">
<h2>{{aut.name}} {{aut.model}}</h2>
</div>
<div class="item item-avatar">
<img src="../www/img/icon/{{aut.doc_name}}">
</div>
</div>
</div>
AS you see from the Array, I have the same ID but the doc_name is different, Means I want to show the ID once but the three Images should be shown as well. How can I achieve that?
Thanks in advance...

You have an error in your JSON whereby you are missing a property name.
Plunker.
angular.module('foo', ['angular.filter'])
.controller('bar', ['$scope', function($scope){
$scope.Detail = [
{
"ID" : "149",
"IDusr" : "4",
"aut_more_info" : "good",
"doc_name" : "img1838142879.jpeg",
"doc_type" : "jpg"
},
{
"ID" :"149",
"IDusr" :"4",
"aut_more_info" :"good",
// you were missing the property name 'doc_name' here...
"doc_name" :"img5733250433.jpeg",
"doc_type" :"jpg"
},
{
"ID" :"149",
"IDusr" :"4",
"aut_more_info" :"good",
"doc_name" :"img1230306801.jpg_doc",
"doc_type" :"jpg"
}
];
}]);
Also you seem to be trying to render values for properties that don't exist in your JSON data
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body ng-app="foo">
<div ng-controller="bar">
<div ng-repeat="(key, value) in Detail | groupBy: 'ID'">
<div ng-repeat="aut in value">
<div class="item item-avatar bar bar-calm">
<!-- you don't have properties name or model in your json -->
<h2>{{aut.name}} {{aut.model}}</h2>
</div>
<div class="item item-avatar">
<img src="../www/img/icon/{{aut.doc_name}}">
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.4/angular-filter.js"></script>
<script src="script.js"></script>
</body>
</html>

I think there's a conceptual error in your JSON (apart the one noticed by #A.Alger).
I like the uniqueness of an ID. For instance, in a simple database table your ID (primary key) is showed exactly one time for each select. If you make some join operations that ID can be present more than one time. This is fine, since database table (and select) lack the expressivity that JSON indeed have, so I will return a json like this:
[{
"ID": "149",
"IDusr": "4",
"aut_more_info": "good",
"docs": [{
"doc_name": "img1838142879.jpeg",
"doc_type": "jpg"
}, {
"doc_name": "img5733250433.jpeg",
"doc_type": "jpg"
}, {
"doc_name": "img1230306801.jpg",
"doc_type": "jpg"
}]
}]
In this way the documents are naturally grouped together, and you can use your angular without any plugin:
<div ng-repeat="user in users">
ID: {{user.ID}} - IDusr: {{user.IDusr}}
<h5>Images</h5>
<div ng-repeat="doc in user.docs">
{{doc.doc_name}} <br>
{{doc.doc_type}}
<hr>
</div>
</div>
This is a plunker that show how it works.

Cannot get angular.isString to work with ng-repeat

I'm trying to do an angular.isString comparison with ng-if inside an ng-repeat. But all items in the array are returned.
So I tried to just output the angular.isString result but it doesn't output anything.
Here is what I would like to do:
<li ng-repeat="item in data">
<div ng-if="angular.isString(item)">
{{ item }}
</div>
</li>
function MyCtrl($scope)
{
$scope.data =
[
"Hello",
"-",
123
];
}
Here's a fiddle: http://jsfiddle.net/m6k13whh/2/

Angular expressions are evaluated against the scope. You can create a function which returns angular.isString:
<li ng-repeat="item in data">
<div ng-if="isString(item)">
{{ item }}
</div>
</li>
$scope.isString = function(item) {
return angular.isString(item);
}
You can also just filter all of the items with that function:
<li ng-repeat="item in data | filter:isString">
<div>
{{ item }}
</div>
</li>

The best solution is to pass reference to angular method into scope
$scope.isString = angular.isString
then in partial you can just use ng-if="isString(item)"
http://plnkr.co/edit/5keCUQrHQnbl4Wg0oKp1?p=preview

Hej,
Make sure you only import one library.
Because in the fiddle you have include two angular scripts.
Remove the one in External Resources!
<div ng-app="myApp" ng-controller="MyCtrl">
<!-- this if comparison is what I want to do -->
<ul>
<li data-ng-repeat="item in data">
<div data-ng-if="isString(item)">
{{ item }}
</div>
</li>
</ul>
</div>
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl', function($scope) {
$scope.data = [
"Hello",
"-",
123
];
$scope.isString = function(value) {
return angular.isString(value);
};
});

How to make template without ng-repeat and pass data to $scope with angular-drag-and-drop-lists?

I want to use angular-drag-and-drop-lists with my own grid template to WYSIWYG editor. How to build my own HTML template without ng-repeat so it will be able to drop items in any predefined column and store information in $scope in which column item has been dropped?
I want to store dropped items in columns array:
.controller('DragDropGrid', ['$scope',
function($scope) {
$scope.layouts = {
selected: null,
templates: [
{name: "Plugin", type: "item", id: 2},
],
columns: [],
oldaproachcolumns: [
"A": [
],
"B": [
]
}
]
};
}
]);
This is currently not a working template. On drop it throws the error "undefined is not an object (evaluating 'targetArray.splice')":
<div ng-include="'grid.html'"></div>
<script type="text/ng-template" id="grid.html">
<div class="col-md-12 dropzone box box-yellow">
<div class="row template-grid" dnd-list="list">
<div class="col-xs-12 col-md-8" ng-repeat="item in list" dnd-draggable="item" ng-include="item.type + '.html'">Header</div>
<div class="col-xs-6 col-md-4">News</div>
</div>
</div>
</script>
<script type="text/ng-template" id="item.html">
<div class="item">Plugin {{item.id}}</div>
</script>
This is the standard working aproach:
<div class="row">
<div ng-repeat="(zone, list) in layouts.oldaproachcolumns" class="col-md-3">
<div class="dropzone box box-yellow">
<h3>{{zone}}</h3>
<div ng-include="'list.html'"></div>
</div>
</div>
</div>
<script type="text/ng-template" id="list.html">
<ul dnd-list="list">
<li ng-repeat="item in list" dnd-draggable="item" dnd-effect-allowed="move" dnd-moved="list.splice($index, 1)" dnd-selected="layouts.selected = item" ng-class="{selected: layouts.selected === item}" ng-include="item.type + '.html'">
</li>
</ul>
</script>
Based on this example: demo

How to build my own HTML template without ng-repeat
Use $templateCache and a for loop as an alternative:
var app = angular.module('foo', []);
function bop(model, data)
{
return data ? model : 'foo';
}
function baz()
{
return bop;
}
function foo($templateCache)
{
var i = 0, len = 5, bar = "";
for (i; i < len; i++)
{
bar = bar.concat("<li>",i,"<p ng-include=\u0022'foo'\u0022></p></li>");
}
$templateCache.put('listContent', bar);
}
angular.module('foo').filter('baz', baz);
app.run(foo);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="foo">
<script type="text/ng-template" id="foo">
<span>hi</span>
</script>
<input ng-model="dude">
<ul ng-include="'listContent' | baz:dude"></ul>
</div>
References
AngularJS: API: $templateCache
AngularJS: Is there a better way to achieve this than the one specified?