I'm trying to make an ng-repeat for a JSON of 10 elements. I would like the ng-repeat to run and display from the 5 element. how can I do it?
<div ng-repeat="item in myarray>
{{item.name}}
</div>
$scope.myarray=
[
{"name":"joe"},
{"name":"ana"},
{"name":"buf"},
{"name":"yei"},
{"name":"jsi"},//5
{"name":"sda"},
{"name":"jofrewe"},
{"name":"re"},
{"name":"we"},
{"name":"we1"}
]
the result should be:
sda
jofrewe
re
name
we1
I suggest to use ng-show to hide some elements.
const app = angular.module("demo", []);
app.controller("test", function($scope) {
$scope.myarray=
[
{"name":"joe"},
{"name":"ana"},
{"name":"buf"},
{"name":"yei"},
{"name":"jsi"},
{"name":"sda"},
{"name":"jofrewe"},
{"name":"re"},
{"name":"we"},
{"name":"we1"}
];
$scope.min = 4;
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="demo" ng-controller="test">
<input type="range" ng-model="min"
min="0" max="10"/>
<div ng-repeat="item in myarray" ng-show="$index>=min">
{{item.name}}
</div>
</div>
You could do it manually:
ng-repeat="item in myarray.slice(4, myarray.length)"
Not necessarily clean or beautiful though.
You can provide a real expression in the ng-repeat directive. So just use slice to get the needed elements from the array:
<div ng-repeat="item in myarray.slice(5)">
{{item.name}}
</div>
Related
I have an ng-repeat that has an ng-if attached to it, with a child element that I am changing with an ng-click. The code looks something like the following:
<div ng-repeat="object in objects" ng-if="show">
<div ng-click="show = !show">Show</div>
</div>
Lets say I had 2 objects, it would load two repeated divs, and there would be two 'show' elements. When I click show, it will only remove one of the repeated elements from the page. I need it to remove both. Thoughts?
If you want to hide all I would wrap all of it in an outer div and place the "ng-if" there.
<div ng-if="show">
<div ng-repeat="object in object">
<div ng-click="show = !show">Show</div>
</div>
</div>
I would however advise to place any logic that modifies data in the TS file instead of in the html view.
Your template is almost correct, the only thing that is worth mentioning is that:
The scope created within ngIf inherits from its parent scope
using prototypal inheritance.
The main caveat of prototypal inheritance is that setting a primitive value on the child scope shadows the value on the parent scope. There are different approaches of how to avoid this, see the code snippet below:
angular.module('app', [])
.controller('mainController', function mainController($scope) {
var ctrl = this;
$scope.show = true;
$scope.showList = {value: true};
$scope.objects = [{}, {}, {}];
$scope.toggleShowVar = function(){
$scope.show = !$scope.show;
};
ctrl.show = true;
});
<!-- JS -->
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.js"></script>
<body ng-app="app">
<div class="container" ng-controller="mainController as $mainCtrl">
<p>This will not work due to scope prototypal inheritance:</p>
<div ng-if="show">
<div ng-repeat="object in objects">
<div ng-click="show = !show">Show {{show}}</div>
</div>
</div>
<p>Using "controller as" will help us:</p>
<div>
<div ng-repeat="object in objects" ng-if="$mainCtrl.show">
<div ng-click="$mainCtrl.show = !$mainCtrl.show">Show {{$mainCtrl.show}}</div>
</div>
</div>
<p>Or simply using "dot in the model":</p>
<div>
<div ng-repeat="object in objects" ng-if="showList.value">
<div ng-click="showList.value = !showList.value">Show {{showList.value}}</div>
</div>
</div>
<p>Or using controller method for toggle:</p>
<div>
<div ng-repeat="object in objects" ng-if="show">
<div ng-click="toggleShowVar()">Show {{show}}</div>
</div>
</div>
<p>Or using $parent to change it in the controller's scope:</p>
<div>
<div ng-repeat="object in objects" ng-if="$parent.show">
<div ng-click="$parent.$parent.show = !$parent.$parent.show ">Show {{$parent.show}}</div>
</div>
</div>
</div>
</body>
I have list of product and from each product use will add some quantity which I need in my controller.
the product list is not fix it might be 10 product (10 input box for qty) or may 100 product.
In HTML this is my code
<div class="col m3" ng-repeat="product in productlist" ng-cloak>
<h6 style="font-size:14px;">{{ product.product_name }}</h6>
<input ng-modal="qty[product.pid]" placeholder="Qty" type="number">
<button class="btn-flat" ng-click="addQty(product.pid)">ADD</button>
</div>
I am not understanding how I can get this value along with pid in controller
// ORDER ADD
$scope.addQty = function (pid) {
//$scope.qty = {};
//$scope.product = $scope.productlist;
console.log($scope.qty[pid]);
var getlistURL = $scope.baseURL+$scope.uri.uri_1+"/"+$scope.uri.uri_2+"/ng_add_to_cart/"+pid+"/";
$http.post(getlistURL).
success(function(data, status) {
if(data.length != 0) {
$scope.stockmovement = data;
$('#showStockMovement').modal('open');
}
});
};
Thanks
Here you should not try to pass just id like you did in the code. Instead of that, pass the entire object to the function and when you will manipulate its attributes, it will get effect on the page at the same time. This is how you can get real time effect of quantity change.
So modify the argument of the addQty function.
<div class="col m3" ng-repeat="product in productlist" ng-cloak>
<h6 style="font-size:14px;">{{ product.product_name }}</h6>
<input ng-modal="qty[product.pid]" placeholder="Qty" type="number">
<button class="btn-flat" ng-click="addQty(product)">ADD</button>
</div>
Then you can access any attribute of the product object in the function. Like written below:
// ORDER ADD
$scope.addQty = function (product) {
//$scope.qty = {};
//$scope.product = $scope.productlist;
console.log(product.pid);
var getlistURL = $scope.baseURL+$scope.uri.uri_1+"/"+$scope.uri.uri_2+"/ng_add_to_cart/"+product.pid+"/";
$http.post(getlistURL).
success(function(data, status) {
if(data.length != 0) {
$scope.stockmovement = data;
$('#showStockMovement').modal('open');
}
});
};
This is your solution.
Deducing from the limited information that is available, my guess is that you haven't initialized your array qty.
You should initialize your qty array to a length equal to the length of your productlist, with all initial values set to 0.
$scope.qty = [];
var initQty = function(){
for(var i = 0;i<$scope.productlist.length;i++){
$scope.qty[i]=0;
}
}();
Apart from that, your code looks fine after changing the ng-modal to ng-model, as already suggested by other folks.
I have updated my answer
angular.module('myApp', [])
.controller('myController', function($scope) {
//$scope.productlist = [];
$scope.modelData = {};
$scope.productlist = {
0:{"pid" : 1,
"product_name" : "Laptop",
},
1:{"pid" : 2,
"product_name" : "Computer",
},
2:{"pid" : 3,
"product_name" : "Camera",
},
3:{"pid" : 4,
"product_name" : "Tv",
}
}
$scope.addQty = function(pid){
alert(pid)
console.log($scope.modelData[pid])
}
});
<html ng-app="myApp">
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.18/angular.js"></script>
<script type="text/javascript" src="app.js"></script>
<title>Angular-Google-Charts Example</title>
</head>
<body>
<div class="modal" style="background-color: #EDEEF1;" ng-controller="myController">
<div class="col m3" ng-repeat="product in productlist" ng-cloak>
<h6 style="font-size:14px;">{{ product.product_name }}</h6>
<input ng-model="modelData[product.pid]" placeholder="Qty" type="number">
<button class="btn-flat" ng-click="addQty(product.pid)">ADD</button>
</div>
</div>
</body>
</html>
Please check this demo. Let me know if it works!
if your productlist is of this type.
$scope.productlist =
[
{product_name: "Soap", pid: 25},
{product_name: "Bag", pid: 100}
];
Use this code
<div class="col m3" ng-repeat="product in productlist">
{{ product.product_name }}
<input ng-model="product.pid" placeholder="Qty" type="number">
<button class="btn-flat" ng-click="addQty(product)">ADD</button>
</div>
if you want to enter pid manually and get value in controller and don't want to attach with productlist
<div class="col m3" ng-repeat="product in productlist">
{{ product.product_name }}
<input ng-model="qty" placeholder="Qty" type="number">
<button class="btn-flat" ng-click="addQty(qty)">ADD</button>
</div>
and in your code type error is there change "ng-modal" to "ng-model"
seems like you want only the qty number so better try second one
https://plnkr.co/edit/gBLx1iIWL4x84ldtQAtF?p=preview
Here is a working plunker.. Changes I made are only 2 ng-model instead of ng-modal and initialised qty as object so now your quantities will be stored with pid as key of the object and qty as value of the object
for example :-
{ "1" : 6, "2" :12}
so you can basically have as many products you want with this
ng-repeat is an isolated scope , so model variables created in ng-repeat are not accessible in controller.
To solve your requirement we can follow two approaches
1.you can pass product id and quantity as two arguments and retrieve that in a function
<body ng-app="myApp" ng-controller="myCtrl">
<div class="col m3" ng-repeat="product in productlist" ng-cloak>
<h6 style="font-size:14px;">{{ product.product_name }}</h6>
<input ng-model="qty" placeholder="Qty" type="number">
<button class="btn-flat" ng-click="addQty(product.id,qty)">ADD</button>
</div>`
but this approach we dont have track of all products and all quantities, please check below plunker
https://plnkr.co/edit/zAz6FVgazOH4NWYpKb4u?p=preview
2.Second approch is following ControllerAs concepts , instead of using $scope we use ControllerAs to get values inside controller model.
<body ng-app="myApp" ng-controller="myCtrl as ctl">
<div class="col m3" ng-repeat="product in ctl.productlist" ng-cloak>
<h6 style="font-size:14px;">{{ product.product_name }}</h6>
<input ng-model="ctl.qty[product.id]" placeholder="Qty" type="number">
<button class="btn-flat" ng-click="ctl.addQty(product.id)">ADD</button>
</div>
{{ctl.qty}}
In this approach we can build an object called qty where we can keep track of all products and quantities
Please check below plunker for this approach
https://plnkr.co/edit/QIVGt8MCdPRAhHaqVA64?p=preview
Hope this meets your requirement
for(var i=0;i<a.length;i++){
$scope.inputs=[
{name:a[i],value:b[i]}
];
}
this is my Javascript code i want to know how to write (ng-repeat) for arrays
Your JS is invalid, will produce length 1 array. Replace it with this:
$scope.inputs=[];
for(var i=0;i<a.length;i++){// be sure that a.length >=b.length
$scope.inputs.push({name:a[i],value:b[i]}); // push will add new entry to your inputs array.
}
The you can use it in ng-repeat:
<div ng-repeat="entry in inputs"> {{entry.name}} : {{entry.value}} </div>
You don't write loops surrounding a global variable. You leave the variable by itself and then you call the loop. Later you just use the global variable in the html code.
I made a cool snippet so you understand how it works:
angular.module('demo', [])
.controller('Ctrl', ['$scope', function ($scope) {
$scope.inputs = [];
var a = ['name1', 'name2', 'name3'];
var b = [133,233,456];
//this code has to be called somewhere else. It might be part of a function.
for(var i=0; i < a.length; i++){
$scope.inputs.push( {name:a[i],value:b[i]} );
}
}])
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="demo">
<div ng-controller="Ctrl">
<ul>
<li ng-repeat="item in inputs">
<input ng-model="item.name"/>
</li>
</ul>
<!--This is only to display the content of $scope.inputs -->
<pre>{{inputs | json}}</pre>
</div>
</div>
If you have an array in your controller, with a scope that is visible in your html
angular.module('appName').controller('mainCtrl', mainCtrl);
function mainCtrl($scope) {
$scope.inputs = [
key: value,
...
];
}
In your html you would use ng-repeat within the scope of the controller. You can use the ng-repeat directive on several different html tags, such as <ul> lists, a div, select dropdowns and more
<div ng-controller="mainCtrl">
<ul>
<li ng-repeat="item in inputs">{{item.key}} <!-- Prints 'value' --></li>
</ul>
</div>
I am trying to print a list which has 2 elements (binded dynamically)taken from 2 different arrays.
Following is my code:
scopehie.html
<html>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="scopehie.js"></script>
<body ng-app="myApp">
<div ng-controller="parentCtrl">
Hello {{name}} !! </br></br>
</div>
<div ng-controller="childCtrl">
<ol>
<li ng-repeat-start="name in names", ng-repeat-end="dept in department">{{name}} from {{dept}}</li>
</ol>
</div>
</body>
</html>
scopehie.js
var app = angular.module('myApp' , []);
app.controller('parentCtrl', function($scope, $rootScope){
$scope.name = 'World';
$rootScope.department = 'Angular' ;
}) ;
app.controller('childCtrl' , function($scope){
$scope.names = ['A' , 'B' , 'C' , 'D'];
$scope.department = ['M' , 'N' , 'O'];
});
The problem is that my first parameter i.e "name in names" is looping but the second parameter i.e "dept in department" is not looping , infact it is not showing at all.
Output shown :
Hello World !!
1.A from
2.B from
3.C from
4.D from
Output required :
Hello World !!
1.A from M
2.B from N
3.C from O
4.D from P
Kindly suggest something.
try this simple $index way
<li ng-repeat="dept in department">{{names[$index]}} from {{dept}}</li>
You can do it by using ng-repeat only. not needed start and end .
Use something like this :
<ol>
<li ng-repeat="name in names">
{{name}} from {{department[$index]}}</li>
</ol>
The thing is you can use ng-repeat on just one veriable. While ng-repeat-start and -end is for repeating a block of html tags instead of just one tag. So...
If there is one to one mapping between names and department then you can do in this way.
<li ng-repeat="name in names">{{name}} from {{department[$index]}}</li>
working example here
<body ng-app="myApp">
<div ng-controller="parentCtrl">
Hello {{name}}
<br>
</div>
<div ng-controller="childCtrl">
<ol>
<li ng-repeat="name in names">
{{name}} from {{department[$index]}}
<br>
</li>
</ol>
</div>
</body>
Here's the jsFiddle: http://jsfiddle.net/VSph2/274/
I'm trying to make a filter with checkboxes.
When the user clicks the checkbox, it adds the id to an array called color_ids. I know that's working because I print the array in the console.
However, when I try to combine that with a filter, it doesn't work. I try to pass the $scope.color_ids array, but it is always passing an empty array and not passing the array with values in them.
app.controller('IndexCtrl', ['$scope', "Product", "Color", function($scope, Product, Color) {
...
// this method is triggered by a checkbox
$scope.toggleColorFilter = function(color_id) {
var index = $scope.color_ids.indexOf(color_id);
if (index > -1) {
$scope.color_ids.splice(index, 1);
} else {
$scope.color_ids.push(color_id);
}
console.log($scope.color_ids); //<-- prints the array properly with the new values.
};
}]);
and a filter that isn't working:
app.filter('productFilter', function(){
return function(input, color_ids) {
console.log(color_ids); //<-- prints an empty array all the time [ ]
return input;
}
})
This is my HTML
<h2>Products</h2>
<div class="filters col-two" ng-controller="IndexCtrl">
<h3>Color</h3>
<div ng-repeat="color in colors">
{{color.name}} <input type="checkbox" ng-model="color_ids" ng-change="toggleColorFilter(color.id)">
</div>
<h3>Shape</h3>
<h3>Material</h3>
</div>
<div class="products col-ten" ng-controller="IndexCtrl">
<div class="product" ng-repeat="product in products | productFilter:color_ids">
<h3>
{{ product.name }}
</h3>
<div class="product-thumbs">
<div class="image-wrapper" ng-repeat="product_color in product.products_colors">
<img src="{{ product_color.color.image.url }}" width="75" height="40">
</div>
</div>
</div>
</div>
I want the filter to eventually only show products with a color_id that exist in the color_ids array.
You have three divs with ng-controller="IndexCtrl" in your JSFiddle example. This is the problem. Each time the Angular compiler finds ng-controller in the HTML, a new scope is created.
<div class="filters col-two" ng-controller="IndexCtrl">
<h3>Color</h3>
<div ng-repeat="color in colors">{{color.name}}
<input type="checkbox" ng-model="color_ids" ng-change="toggleColorFilter(color.id)">
</div>
</div>
<div class="products col-ten" ng-controller="IndexCtrl">
<div class="product" ng-repeat="product in products | productFilter:color_ids">
{{ product.name }}
</div>
</div>
Simpliest way is to place this code in one controller and it will print 2 similiar arrays in your console:
<div ng-controller="IndexCtrl">
<div class="filters col-two">
<h3>Color</h3>
<div ng-repeat="color in colors">{{color.name}}
<input type="checkbox" ng-model="color_ids" ng-change="toggleColorFilter(color.id)">
</div>
</div>
<div class="products col-ten">
<div class="product" ng-repeat="product in products | productFilter:color_ids">
{{ product.name }}
</div>
</div>
</div>
JSFiddle
The filter is applied before the color_ids is updated, you should apply the filter in the controller inside the toggle function:
$filter('productFilter')($scope.products, $scope.color_ids);
Here is the working findle (at least I think): http://jsfiddle.net/VSph2/276/
Don't forget to inject the $filter in your controller.