I would like to do this:
ng-show="node.status | limitTo:1:1 == 1"
In a simple angular expression it works: {{ node.status | limitTo:1:1 }} =1
I can't get it to work in a ngShow or ngIf statement....
limitTo works only with ng-repeat, you cannot have on ng-if or ng-show
Creates a new array or string containing only a specified number of
elements. The elements are taken from either the beginning or the end
of the source array, string or number, as specified by the value and
sign (positive or negative) of limit.
alternatively you can have a function that implements your logic and call it within ng-if or ng-show
You can use charAt to get the specified character from a string and then use with
ngIf/ngShow or ngSwitch:
var app = angular
.module("myApp", [])
.controller("myCtrl", function ($scope) {
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">
<div ng-repeat="node in [{status: '*C,1,0,19,064'}, {status: '*S,1,0,19,064'}] track by node.status">
<div ng-if="node.status.charAt(1) === 'C'">This is status C</div>
<div ng-if="node.status.charAt(1) === 'S'">This is status S</div>
</div>
<hr/>
<div ng-repeat="node in [{status: '*C,1,0,19,064'}, {status: '*S,1,0,19,064'}] track by node.status"
ng-switch="node.status.charAt(1)">
<div ng-switch-when="C">This is status C</div>
<div ng-switch-when="S">This is status S</div>
<div ng-switch-default>This is default status</div>
</div>
</body>
Related
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>
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
I have item array that changes in application.
When I delete items limitTo automatically trims its limit value, but when I add items it doesn't return the original limit value back. Like as limit=5 and items.length becomes 2 limitTo value becomes 3 and never grows back to 5 when items.length increases. Uplating limit doesn' work.
JS:
$scope.filterLimit = 5;
$scope.itemList2 = ['item1', 'item2', 'item3', 'item4']
HTML:
<div ng-repeat="i in itemList2 | limitTo: filterLimit">
<h5>{{i}}</h5>
</div>
<button ng-click="itemList2.push('new item')"> Add </button><br>
<button ng-click="itemList2.length = itemList2.length-1"> Delete </button><br>
<button ng-click="filterLimit = filterLimit+1"> Update </button>
Well, the main problem is that you're adding the same element to list, so ngRepeat claims about it giving the following error: ngRepeat:dupes.
To solve it, you must use track by expression in your ngRepeat, like this:
<div ng-repeat="i in itemList2 | limitTo: filterLimit track by $index">
Note: Filters, like limitTo, orderBy, etc... must come before track by expression.
Also I recommend you to use functions of controller for ng-click() instead of doing all in view.
Here's a version with all issues fixed:
angular.module('app', [])
.controller('mainCtrl', function($scope) {
$scope.filterLimit = 5;
$scope.itemList2 = ['item1', 'item2', 'item3', 'item4'];
$scope.add = function() {
$scope.itemList2.push('item');
}
$scope.delete = function() {
$scope.itemList2.pop();
}
$scope.increment_filter = function() {
$scope.filterLimit++;
}
});
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
</head>
<body ng-controller="mainCtrl">
<div ng-repeat="i in itemList2 | limitTo: filterLimit">
<h5 ng-bind="i"></h5>
</div>
<button ng-click="add()"> Add </button>
<br>
<button ng-click="delete()"> Delete </button>
<br>
<button ng-click="increment_filter()"> Update </button>
<hr>
List: <pre ng-bind="itemList2"></pre>
Limit: <pre ng-bind="filterLimit"></pre>
</body>
</html>
I would like to orderby below on card
<div ng-app="myApp" ng-controller="Ctrl">
<div ng-repeat="card in myCards | orderBy:'card'">
<businesscard>{{card}}</businesscard>
</div>
</div>
angular.module('myApp', [])
.controller('Ctrl', function($scope) {
$scope.myCards = ['J', 'S', 'A'];
});
The result i am expecting is,
A
J
S
instead i am getting
J
S
A
To sort by the value, simply provide no parameters to orderBy (see orderBy array item value in Angular ng-repeat):
<div ng-repeat="card in myCards | orderBy">
Try this
<div ng-repeat="card in myCards | orderBy:'toString()'">
<businesscard>{{card}}</businesscard>
</div>
Here I have a div in the ng-repeat
<div ng-class="{div0f:result.subscribed==omega.harish,div0g:!result.subscribed==omega.harish}" id="mecota0f"
ng-click="omega.harish=!result.subscribed" >
Now here result.subscribed is a boolean value coming from the services and omega.harish is my simple boolean variable
the class of this div will be according to the result.subscribed value
Now I also want to change the active class of the one of the div created in the ng-repeat but the class of other created divs are kept getting affected.
var app = angular.module('subscribeWho', ['ngResource']);
app.controller('mysubscribeWho', ['subscriberFactory',
function(subscriberFactory) {
var self = this;
subscriberFactory.get({}, function(subscriberFactory) {
self.subscriberdata = subscriberFactory.user;
});
self.harish = false;
}
]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div id="border-forpb" class="col-sm-12 panel panel-default" ng-app="subscribeWho">
<div class="panel-body" id="artle_panel_body" ng-controller="mysubscribeWho as omega">
<div ng-repeat="result in omega.subscriberdata">
<div ng-class="{div0f:result.subscribed==omega.harish,div0g:!result.subscribed==omega.harish}" id="mecota0f" ng-click="omega.harish=!result.subscribed">
</div>
</div>
</div>
You are changing outer scope omega.harish value which is common for all items in the ngRepeat. Instead create local scope copy of omega.harish with ngInit directive:
<div ng-repeat="result in omega.subscriberdata">
<div ng-class="{div0f:result.subscribed==harish,div0g:!result.subscribed==harish}" id="mecota0f"
ng-init="harish = omega.harish"
ng-click="harish=!result.subscribed">
</div>
</div>