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(/([^.]+)$/);
}
}
});

Angular JS ng-repeat

Working DEMO with Single List
Edit : Trying to Add Code Snippet IN JSON to Display in Front END as attached in the image.
can you please advice can we add ?
http://i.stack.imgur.com/Y2LOs.png
i have a list of data that has to be displayed in Listing, as of now i only have one object and only one li can add
can we render object in side a object just like this, i tried there is error.
"list":{
{"object":"1"},
{"object":"2"},
{"object":"3"},
{"object":"4"},
{"object":"5"}
}
JSON :
[
{
"title" : "JavaScript ?",
"description" : "Hey, here are some of the merits of javascript",
"list" : "JavaScript is very easy to implement. All you need to do is put your code in the HTML document and tell the browser that it is JavaScript.",
"uploadedDate" : "April 12 2015",
"tags" : "javascript, webdevelopment"
}
]
JS :
var app = angular.module("jsBlogApp", []);
//Menu
app.service("headerMenu", function($http, $q) {
var deferred = $q.defer();
$http.get('json/headerMenu.json').then(function(data){
deferred.resolve(data);
});
this.getMenuItems = function (){
return deferred.promise;
}
})
.controller("headerMenuCtrl", function($scope, headerMenu){
var promise = headerMenu.getMenuItems();
promise.then(function(data){
$scope.headerMenuItems = data.data;
console.log($scope.headerMenuItems);
})
})
// Secondary Menu
app.service("secondaryHeaderMenu", function($http, $q) {
var deferred = $q.defer();
$http.get('json/secondaryHeaderMenu.json').then(function(data){
deferred.resolve(data);
});
this.getSecondaryMenuItems = function (){
return deferred.promise;
}
})
.controller("SecondaryheaderMenuCtrl", function($scope, secondaryHeaderMenu){
var promise = secondaryHeaderMenu.getSecondaryMenuItems();
promise.then(function(data){
$scope.SecondaryMenuItems = data.data;
console.log($scope.SecondaryMenuItems);
})
})
app.service("jsBlogService", function($http, $q) {
var deferred = $q.defer();
$http.get('json/data.json').then(function(data){
deferred.resolve(data);
});
this.getPlayers = function (){
return deferred.promise;
}
})
.controller("jsBlogCtrl", function($scope, jsBlogService){
var promise = jsBlogService.getPlayers();
promise.then(function(data){
$scope.items = data.data;
console.log($scope.items);
})
})
HTML :
{{menu.title}}
<div class="second__header">
<div class="second__header__wrap clearfix">
<div class="js__logo__wrap">
<h1 class="js__logo">JS Developer</h1>
<div class="js__logo__subtitle">~ codeJS </div>
</div>
<div class="c2f__nav__wrap" data-ng-controller="SecondaryheaderMenuCtrl">
<ul class="c2f__nav">
<li data-ng-repeat="menu in SecondaryMenuItems">
{{menu.title}}
</li>
</ul>
</div>
</div>
</div>
</header>
<section class="c2f__content clearfix">
<div class="c2f__cont_left">
<!--content starts-->
<div class="content__wrap" data-ng-controller="jsBlogCtrl">
<div data-ng-repeat="item in items">
<h2 class="title__head"> {{ item.title }}</h2>
<p class="desc__head">{{ item.description }}</p>
<p>Listing
<ul class="data__lisitng">
<li>
<span>{{ item.list }}</span>
</li>
</ul>
</p>
<div class="code"></div>
<span class="content__added__date">
{{ item.uploadedDate }}
</span>
<span class="content__tags">
<span class="tags__links__title">Tags - </span>
<span class="tags__links__desc">{{ item.tags }}</span>
</span>
</div>
</div>
</div>
</section>
<footer>
</footer>
</div>

I finally get what you were trying:
Here is a working plunkr: https://plnkr.co/edit/8TLDTV0OtE10hITr9Vf9?p=preview
JSON
[
{
"title" : "JavaScript ?",
"description" : "Hey, here are some of the merits of javascript",
"list" : [
{
"subtitle":"subtitle1",
"message":"message1"
},
{
"subtitle":"subtitle2",
"message":"message2"
}
] ,
"uploadedDate" : "April 12 2015",
"tags" : "javascript, webdevelopment"
}
]
HTML
<div class="content__wrap" data-ng-controller="jsBlogCtrl">
<div data-ng-repeat="item in items">
<h2 class="title__head"> {{ item.title }}</h2>
<p class="desc__head">{{ item.description }}</p>
<p>Listing
</p>
<ul class="data__lisitng">
<li ng-repeat="message in item.list">
<span>{{ message.message }}</span>
</li>
</ul>
<p></p>
<div class="code"></div>
<span class="content__added__date">
{{ item.uploadedDate }}
</span>
<span class="content__tags">
<span class="tags__links__title">Tags - </span>
<span class="tags__links__desc">{{ item.tags }}</span>
</span>
</div>
</div>

At least the list should be like this instead:
"list":[
{"object":"1"},
{"object":"2"},
{"object":"3"},
{"object":"4"},
{"object":"5"}
];
I would prefer something like:
$scope.list = [
{"object":"1"},
{"object":"2"},
{"object":"3"},
{"object":"4"},
{"object":"5"}
];

use '[' instead of '{'
[
{"object":"1"},
{"object":"2"},
{"object":"3"},
{"object":"4"},
{"object":"5"}
]

"list":{
{"object":"1"},
{"object":"2"},
{"object":"3"},
{"object":"4"},
{"object":"5"}
}
is not valid. Please use a valid object/array for ng-repeat

orderBy is not updating when I click on a button

Hope somebody can help me with my problem.
I am trying to order my list on specific data and this works fine when I say upfront on what it needs to be sorted.
But when I do this when I click on a button it doesn't order my list in anyway.
Hope somebody can help me with this problem.
this is my app.js code:
app.controller("ListController", function ($scope, $interval, $http, myService, OpenDataService) {
myService.async().then(function (d) {
OpenDataService.opendata = d;
$scope.openData = OpenDataService.opendata;
$scope.order = "";
});
$scope.orderOptions = ["gemeente", "locatie"];
$scope.change = function (value) {
console.log("change");
$scope.order = value;
console.log(value);
}
$scope.test = OpenWifiData;
});
And here is the html code I use:
<li ng-click="change('gemeente')"><a>locatie</a></li>
<div id="WifiSpots" ng-controller="ListController" class="col-sm-12 col-md-4 col-md-offset-2">
<div ng-repeat="item in openData | filter:searchText | orderBy: order">
<ul class="list-group">
<li class="list-group-item">
<div class="row wifiSpots" >
<div class="col-md-2">{{item.locatie}}</div>
<div class="col-md-2">{{item.gemeente}}</div>
<div clas="col-md-1">{{item.distance}}</div>
<div clas="col-md-1">{{item.duration}}</div>
<button ng-controller="MapController" ng-click="calculateAndDisplayRoute(item.objectid)" class="btn ">Selecteer</button>
</div>
</li>
</ul>
</div>
</div>

The 'order' in the ng-repeat directive is in a different scope than the one in your controller. Add a wrapper class like so:
$scope.opts = {order: ""};
Then in your change function update that instead:
$scope.opts.order = value;
In the html:
orderBy:opts.order

Add template conditionally in Angular

I have some data:
$scope.posts = [
{ 'name' : 'post1', 'templateName' : 'template1.html' },
{ 'name' : 'post2', 'templateName' : 'template2.html' }
]
...and I have two templates:
<script type="text/ng-template" id="template1.html">
<p><span>{{post.name}}</p></li>
</script>
<script type="text/ng-template" id="template2.html">
<p>{{post.name}}</p>
</script>
They are to be inserted into a list that is backed by $scope.posts, which in turn is listed with:
<li ng-repeat="post in posts"></li>
How do I iterate over $scope.posts and insert the right template, based on 'templateName', but also populate it with post.name?

I would use ngIf for something like this, you can also use ngSwitch
<p ng-if="post.templateName == myTemplate"></p>
<p ng-if="post.templateName == myOtherTemplate"></p>

So I ended up doing the following:
<li ng-repeat="post in posts">
<ng-include src="post.template"></ng-include>
</li>

Just to be safe:
<li ng-repeat="post in posts">
<div ng-include="post.templateName"></div>
</li>
In case some Browsers(IE) don't like non standard tags.

AngularJS push item does not work

I have put all necessary files into a single file. I want to push item into array when the user clicks on a button. Here is the content:
When I click on the button, nothing happens. Also the data is not repeated/looped and {{}} is shown in angular which means there is a problem.
<script type="text/javascript" src="angular.js" ></script>
<div data-ng-app="App">
<div data-ng-controller="MyController">
<ul data-ng-repeat="one in names">
<li>{{ one.first }}</li>
</ul>
</div>
</div>
<input type="text" data-ng-model="Namer.name"/>
<input type="submit" data-ng-click="AddName()"/>
<script type="text/javascript">
var App = angular.module("App", []);
App.controller("MyController", function($scope){
$scope.names = [
{ first : "Thomas"},
{ first : "Geferson"},
{ first : "Jenny"},
{ first : "Maria"},
];
$scope.AddName = function(){
$scope.names.push({
name : $scope.Namer.name;
});
};
});
</script>

Working DEMO
var App = angular.module("App", []);
App.controller("MyController", function ($scope) {
$scope.names = [{
first: "Thomas"
}, {
first: "Geferson"
}, {
first: "Jenny"
}, {
first: "Maria"
}];
$scope.AddName = function () {
$scope.names.push({
first: $scope.Namer.name
});
};
});
You need to move your data-ng-click inside Controller.Also you had some syntax issues.That is also i fixed (To work with IE ALSO)
<div data-ng-app="App">
<div data-ng-controller="MyController">
<ul data-ng-repeat="one in names">
<li>{{ one.first }}</li>
</ul>
<input type="text" data-ng-model="Namer.name" />
<input type="submit" data-ng-click="AddName()" />
</div>
</div>

Move your inputs to inside your MyController so that it executes code in the scope created by the controller:
<div data-ng-app="App">
<div data-ng-controller="MyController">
<ul data-ng-repeat="one in names">
<li>{{ one.first }}</li>
</ul>
<input type="text" data-ng-model="Namer.name"/>
<input type="submit" data-ng-click="AddName()"/>
</div>
</div>
Another mistake is that you need to change name to first to match with your existing object
$scope.AddName = function(){
$scope.names.push({
first : $scope.Namer.name //change to first and remove the ;
});
};
DEMO