How to repeat an angular element starting on index 1? - javascript

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>

Related

Return increment ng repeat in ng repeat with function angularJS

I have a ng-repeat inside another ng-repeat and I need to be able to bring the global count of all records.
I have tried declaring a variable in the view within the ng-repeat so that it adds and does not work.
I currently have the following code.
<body ng-app="app">
<div class="table-responsive" ng-controller="quotesController">
<div ng-repeat="info in datos2 track by $index">
<h2><strong>{{info.name}}</strong></h2>
<div ng-init='count()' ng-repeat="dato in data track by $index">
<span>{{dato.name}}</span>
<br> Position {{id}}
<br />
</div>
</div>
</div>
</body>
Code Angular
$scope.count=function(){
number = number + 1;
$scope.id=number;
}
I need every ng-repeat query to bring me the number position where it is.
Example:
Name 1 ITEM 1 - Position 1
ITEM 2 - Position 2
Name 2 ITEM 1 Position 3
ITEM 2 - Position 4
Name 3 ITEM 1 - Position 5
ITEM 2 - Position 6
http://plnkr.co/edit/I5IWOXGmzbu0UNqn04ha?p=preview
You can return a global counter from a controller and assign it to a scope variable on each ngInit of nested ngRepeat like:
// Code goes here
angular.module('app', [])
.controller('quotesController',
function quotesController($scope) {
$scope.datos2 = [{
"name": "Name 1",
}, {
"name": "Name 2",
}, {
"name": "Name 3",
}
];
$scope.data = [{
"name": "ITEM 1",
}, {
"name": "ITEM 2",
}];
var number = 1;
$scope.count = function(){
return number++;
}
});
<body ng-app="app">
<div class="table-responsive" ng-controller="quotesController">
<div ng-repeat="info in datos2 track by $index">
<h2><strong>{{info.name}}</strong></h2>
<div ng-init='id = count()' ng-repeat="dato in data track by $index">
<span>{{dato.name}}</span>
<br> Position {{id}}
<br />
<br>
</div>
</div>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
You should be able to use ngInit for this.
<body ng-app="app">
<div class="table-responsive" ng-controller="quotesController" ng-init="totalCount = 1">
<div ng-repeat="info in datos2 track by $index">
<h2><strong>{{info.name}}</strong></h2>
<div ng-repeat="dato in data track by $index" ng-init="position = totalCount++">
<span>{{dato.name}}</span>
<br> Position {{position}}
<br />
</div>
</div>
</div>
</body>
You can use {{($parent.$index*data.length)+($index+1)}}
<div ng-repeat="info in datos2 track by $index">
<h2><strong>{{info.name}}</strong></h2>
<div ng-init='count()' ng-repeat="dato in data track by $index">
<span>{{dato.name}}</span>
<br> Position {{($parent.$index*data.length)+($index+1)}}
<br />
<br>
</div>
</div>
http://plnkr.co/edit/0mcgZfxmL5PBwSDp0hoo?p=preview

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

shorten ng-repeat variable with limitTo

In my DB I have Datastructure like this
"Projects":[{
"Year2016":[{"Name": "Project1"},{"Name": "Project2"}],
"Year2017":[{"Name": "Project1"},{"Name": "Project2"}]
}]
with ng-repeat i go
ng-repeat="year in Projects"
<b>{{year | limitTo:4:6}}</b>
instead of 2016 i get the whole {"Year2016":.....}
if i put the query response in the code as a string it works as suspected but
for some reason the limitTo is not working on the new ng-repeat "variable"
Is it possible at all?
you should use a (key, value) syntax ng-repeat to loop through json object array with the keys.
refer the below example:
angular.module("app", [])
.controller("myCtrl", function($scope) {
$scope.data = {
"Projects": [{
"Year2016": [{
"Name": "Project1"
}, {
"Name": "Project2"
}],
"Year2017": [{
"Name": "Project1"
}, {
"Name": "Project2"
}]
}]
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="app" ng-controller="myCtrl">
<div ng-repeat="project in data.Projects">
<div ng-repeat="(key, value) in project">
<b>{{key | limitTo:4:4}}</b>
<div ng-repeat="item in value">
<span>{{item.Name}}</span>
</div>
</div>
</div>
</div>
last field id for starting index so your ng repeat should be
ng-repeat="year in Projects"
<b>{{year | limitTo:4:4}}</b>

Unable to add or remove elements from an array in AngularJS

Hello: im gettin my feet wet in AngularJS.
I am trying to add and remove elements in an array; however, im unable to accomplish the desired effect.
the foll is the JSON structure:
$scope.masters = [
{
"name": "Wittgenstein",
"thoughts": ["thought 1", "thought 2", "thought 3"]
},
{
"name": "King",
"thoughts": ["thought 1", "thought 2", "thought 3"]
}
];
the foll is the plunker.
Plunker
any input is greatly appreciated. thank you.
As #Mathew suggested, you should introduce the usage of $index as follows:
JS code:
$scope.input = [];
$scope.add = function(i) { // receiving index as param
$scope.masters[i].thoughts.push($scope.input[i]);
$scope.input[i] = '';
};
HTML code:
<div ng-repeat="master in masters">
<h1>{{ master.name }}</h1>
<ul>
<li ng-repeat="thought in master.thoughts">
{{ thought }} <button ng-click="remove($index)">Remove</button>
</li>
</ul>
<input type="text" ng-model="input[$index]">
<button type="submit" ng-click="add($index)">Add</button>
</div>
See this Plunker working example
You need to specify the index of masters. Something like this should work in the remove function:
$scope.masters[masterIndex].thoughts.splice(index, 1);
where masterIndex is the index of the master that you want to remove a thought from
the problem is that you need pass to the add and remove functions the index of the masters. Because you do this:
$scope.masters.thoughts.splice(index, 1);
But masters is an Array, therefore you need to select one object inside that Array, for example
$scope.remove = function(masterIndex, thoughtsIndex) {
$scope.masters[masterIndex].thoughts.splice(thoughtsIndex, 1);
};
For this to work in your HTML you have to use the parent index inside the inner ng-repeat
<div ng-repeat="master in masters">
<h1>{{ master.name }}</h1>
<ul>
<li ng-repeat="thought in master.thoughts">
{{ thought }}
<button ng-click="remove($patent.index, $index)">
Remove
</button>
</li>
</ul>
<input type="text" ng-model="input">
<button type="submit" ng-click="add($index)">Add</button>
</div>
In the Add function you must do the same to recibe the $index of the masters array.
This is an updated version of your plnkr.
<!DOCTYPE html>
<html ng-app="app">
<head>
<script data-require="angular.js#1.4.0" data-semver="1.4.0" src="https://code.angularjs.org/1.4.0/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="demoController">
<div ng-repeat="master in masters track by $index">
<h1>{{ master.name }}</h1>
<ul>
<li ng-repeat="thought in master.thoughts track by $index">
{{ thought }} <button ng-click="remove(master, $index)">Remove</button>
</li>
</ul>
<input type="text" ng-model="input[$index]">
<button type="submit" ng-click="add($index)">Add</button>
</div>
</body>
</html>
Notice how I included the current master as an argument to the remove function. This ensures that the correct master is spliced since JavaScript arrays are passed by reference. Below is the updated angular controller.
var app = angular.module('app', []);
app.controller('demoController', ['$scope', function ($scope) {
$scope.input = [];
$scope.masters = [ {
"name": "Wittgenstein",
"thoughts": ["thought 1", "thought 2", "thought 3"]
}, {
"name": "King",
"thoughts": ["thought 1", "thought 2", "thought 3"]
}];
$scope.add = function(index) {
$scope.masters[index].thoughts.push($scope.input[index]);
$scope.input[index] = '';
};
$scope.remove = function(master, index) {
master.thoughts.splice(index, 1);
};
}]);
The add function seems not to be picking the value from the input model, but then that should be a binding issue, not the function not working as it should.
Working Plunkr
I hope this helps.

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?

Categories