I have an object something like
x=[{a:1,b:2,c:3,d:'A'},{a:3,b:3,c:1,d:'C'},{a:2,b:1,c:2,d:'B'}]
View In HTML there are 3 buttons
<button ng-click="sortbyA()">
<button ng-click="sortbyB()">
<button ng-click="sortbyC()">
And a pop-up
<div ng-repeat='i in x | orderBy:sortBy'>
<table>
<tr><td>{{i.d}}</td></tr>
</table>
</div>
Angular JS Controller:
var app = angular.module("myApp", []);
app.controller("myCtrl", ['$compile', '$http', '$scope', function ($compile, $http, $scope) {
$scope.get_results=function(){
var response= $http.get();
response.success(function(){
$scope.sortBy='a';
});
}
$scope.sortbyA=function(){
$scope.sortBy='a';
}
$scope.sortbyB=function(){
$scope.sortBy='b';
}
$scope.sortbyC=function(){
$scope.sortBy='c';
}
}])
Use case is to populate data of table based different clicks(A,B,C) with their corresponding property in x
Eg: If click on B,table should have data sorted by attribute :b,
If click on C,table should have data sorted by attribute :c
In HTML
var app = angular.module('app', []);
app.controller('MainCtrl', function($scope) {
$scope.data = [{ a: 1, b: 2, c: 3, d: 'A' }, { a: 3, b: 3, c: 1, d: 'C' }, { a: 2, b: 1, c: 2, d: 'B' }];
$scope.sortBy = 'a'; //for default sorting
$scope.sortItems = function(key) {
$scope.sortBy = key; // key on which prop you want to sort
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="app">
<div class="" ng-controller="MainCtrl">
<button ng-click="sortItems('a')">a</button>
<button ng-click="sortItems('b')">b</button>
<button ng-click="sortItems('c')">c</button>
<button ng-click="sortItems('d')">d</button>
<br />
<div ng-repeat='i in data | orderBy:sortBy'>
<table>
<tr>
<td>{{i.a}}</td>
<td>{{i.b}}</td>
<td>{{i.c}}</td>
<td>{{i.d}}</td>
</tr>
</table>
</div>
</div>
</body>
Response data:
x=[{a:1,b:2,c:3,d:'A'},{a:3,b:3,c:1,d:'C'},{a:2,b:1,c:2,d:'B'}]
Your buttons:
<button ng-click="sortBy = 'a'">
<button ng-click="sortBy = 'b'">
<button ng-click="sortBy = 'c'">
Your table:
<div ng-repeat='i in x | orderBy:sortBy'>
<!-- blabla -->
Your js:
var app = angular.module("myApp", []);
app.controller("myCtrl", ['$compile', '$http', '$scope', function ($compile, $http, $scope) {
$scope.sortBy = 'a';
$scope.get_results=function(){
var response= $http.get();
response.success(function(){
//blabla
});
}
}])
Related
I'm trying to assign a scope variable's value to an ng-style directive but the name is not parsing.
What am I doing wrong? When you press the TEST button it should turn the text to RED but the scope variable is not parsing as it's name is dynamic. I've tried multiple different syntax which all didn't work.
Here is the html:
<div ng-app="myApp" ng-controller="MyCtrl">
<button ng-click="Test()">test</button>
<div ng-repeat="item in items">
<div ng-style="{{'DynamicVariable-'+$index}}">
{{someone.name}}
</div>
</div>
</div>
controller code
var myApp = angular.module('myApp', []);
myApp.controller('MyCtrl', ['$scope', function($scope) {
$scope.someone = {
name: 'John'
};
$scope.items=[1,2,3,4,5,6,7,8,9];
$scope.mainId = 1;
$scope.Test=function(){
for(var i=0;i<$scope.items.length;i++){
$scope["DynamicVariable-"+i]={color:'red'};
}
console.log($scope);
};
}]);
js fiddle that doesn't work:
http://jsfiddle.net/avboivin/0qov365b/4/
It has a problem with '-', try to remove it
html:
<div ng-app="myApp" ng-controller="MyCtrl">
<button ng-click="Test()">test</button>
<div ng-repeat="item in items">
<div ng-style="{{'DynamicVariable'+$index}}">
{{ someone.name }}
</div>
</div>
</div>
controller:
var myApp = angular.module('myApp', []);
myApp.controller('MyCtrl', ['$scope', function ($scope) {
$scope.someone = {
name: 'John'
};
$scope.items = [1, 2, 3, 4, 5, 6, 7, 8, 9];
$scope.mainId = 1;
$scope.Test = function () {
for (var i = 0; i < $scope.items.length; i++) {
$scope["DynamicVariable" + i] = { color: 'red' };
}
console.log($scope);
};
}]);
fork
I'm having an array values like [0,1,5,10].
I need the output to be like this
0
1
b
b
b
5
b
b
b
b
10
For the empty values inside the array, I want to print as b. How can i do it with the ng-repeat and I dont want the static coding it want it to be dynamic.
my code is like this :
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$scope.q = [0,1,5,10];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="customersCtrl">
<div ng-repeat="i in q">{{i}}</div>
</div>
And one more thing id don't want to create a new array using array.push() method.
Please help me on this, thanks in advance.
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$scope.q = [0,1,5,10];
$scope.temp = function(){
var answer = [];
for(var i = $scope.q[0]; i <= $scope.q[$scope.q.length-1]; i++)
answer.push($scope.q.indexOf(i) == -1 ? 'b' : i);
return answer;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="customersCtrl">
<div ng-repeat="i in temp() track by $index">{{i}}</div>
</div>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$scope.q = [0, 1, 5, 10];
$scope.getNumber = function(num) {
if (num > 0) return new Array(num);
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="customersCtrl">
<div ng-repeat="i in q">
<div ng-repeat="j in getNumber(q[$index] - q[$index-1]-1) track by $index">b</div>
{{i}}
</div>
</div>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$scope.q = [0,1,5,10];
$scope.empties = function(index) {
return index === 0 ? [] : new Array($scope.q[index] - $scope.q[index - 1] - 1);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="customersCtrl">
<div ng-repeat = "i in q">
<div ng-repeat = "empty in empties($index) track by $index">b</div>
<div>{{i}}</div>
</div>
</div>
</div>
I can not use selectedItem1 in the controller for some calculation in the following code:
<div class="col-md-3">
<label>Vendere:</label>
<select ng-model="selectedItem1" ng-options="(rosa.nome+' '+rosa.costo) for rosa in rose"></select>
</div>
with the following controller:
var app = angular.module('App', []);
app.controller('Ctrl', function($scope, $http){
$scope.budget0=60;
$scope.budget1=$scope.budget0 - $scope.selectedItem1.someprop;
}
I can understand why? Where i'm wrong?
I guess you need to give initial value to selectedItem1 Check out following example will help you:--
var app = angular.module('App', []);
app.controller('Ctrl', function($scope, $http) {
$scope.rose = [{
'nome': "abc",
'costo':110
}, {
nome: "xyz",
costo: 10
}];
$scope.selectedItem1 = $scope.rose[0];// default selected item
$scope.budget0 = 60;
$scope.budget1 = $scope.budget0 - $scope.selectedItem1.costo;
$scope.change = function(){
$scope.budget1 = $scope.budget0 - $scope.selectedItem1.costo;
console.log($scope.selectedItem1);
console.log($scope.budget0 +"-"+ $scope.selectedItem1.costo +"="+$scope.budget1);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="App" ng-controller="Ctrl">
<select ng-model="selectedItem1" ng-change="change()"
ng-options="(rosa.nome+' '+rosa.costo) for rosa in rose"></select>
<br/>
{{"budget1 == "+budget1}}
</div>
I'm trying to access the $parent in my child controller but for some reason I have to access the Fifth $parent in order to get the actual $scope from the Parent controller, Any Ideas?
Parent Controller
angular.module('App')
.controller('HomeController', ['$scope', '$rootScope', 'user',
function($scope, $rootScope, user) {
$rootScope.currentNav = 'home';
$rootScope.currentUser = user.data;
$scope.tabs = [
{
heading : 'Empresas',
template : 'home_companies_tab.html'
},
{
heading : 'Tickets',
template : 'home_tickets_tab.html'
}
];
$scope.companies = []
$scope.selectedCompanyIndex = undefined;
$scope.selectedCompany = undefined;
$scope.selectedTicketIndex = undefined;
$scope.selectedTicket = undefined;
}]);
Child Controller
angular.module('App')
.controller('HomeCompaniesTabController', ['$scope', 'Companies',
function($scope, Companies) {
$scope.loadCompanies = function () {
$scope.companies = Companies.query();
}
/**
* Init
*/
$scope.selectCompany = function (company, index) {
$scope.$parent.selectedCompanyIndex = index; //this doesnt work
$scope.$parent.$parent.$parent.$parent.$parent.selectedCompany = company; //this does, why?
console.log($scope);
}
if($scope.currentUser.security < 3) {
$scope.loadCompanies();
}
}]);
Home template
<div ng-include="'dist/templates/header.html'"></div>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
company : {{selectedCompany}}
</div>
</div>
<tabset>
<tab ng-repeat="tab in tabs" heading="{{tab.heading}}">
<div ng-include="'dist/templates/' + tab.template" ></div>
</tab>
</tabset>
</div>
Child template
<div class="row-fluid" ng-controller="HomeCompaniesTabController">
<div class="col-md-3">
<h4>Lista de Empresas</h4>
<hr/>
<div class="list-group">
<a
href=""
class="list-group-item"
ng-repeat="company in companies"
ng-click="selectCompany(company, $index)">
<h4 class="list-group-item-heading">
{{company.name}}
</h4>
</a>
</div>
</div>
<div class="col-xs-9">
<div ng-show="selectedCompany">
<h4><b>{{selectedCompany.name}}</b></h4>
</div>
</div>
Based on the comments of charlietfl I came up with this simple service for sharing data
angular.module('App')
.factory('SharedData', [function () {
return {
}
}]);
Then I simply inject it in the controllers
angular.module('App')
.controller('HomeController', ['$scope', '$rootScope', 'user', 'SharedData',
function($scope, $rootScope, user, SharedData) {
$rootScope.currentNav = 'home';
$rootScope.currentUser = user.data;
$scope.sharedData = SharedData;
$scope.tabs = [
{
heading : 'Empresas',
template : 'home_companies_tab.html'
},
{
heading : 'Tickets',
template : 'home_tickets_tab.html'
}
];
$scope.companies = [];
}]);
I have an array of items which could be empty, have one item ore two+ items.
Now if i want to show the element i use the simple ng-show event.
<div ng-show="scopeName">
...
</div>
So, if the pageSlides has items the div will be printed else it will not.
Now i would like to edit this show the div printed when the item has 2 ore more items.
I am trying with this but it doesn't work:
<div ng-show="pageSlides.length > 1"> (or any number)
...
</div>
I would love to some help on this.
Thank you!
UPDATED, here's my code:
myApp
.controller(
'controllerName',
[
'$rootScope',
'$scope',
'$routeParams',
'Api',
function($rootScope, $scope, $routeParams, Api) {
var pageSlug = $routeParams['pageSlug'];
$scope.init = function() {
$scope.singlePage = [];
$scope.pageSlides = [];
Api.get(
'site/' + $rootScope.config.api.propertyId + '/page/' + pageSlug
).then(
function(data) {
$scope.singlePage = data.page;
$scope.pageSlides = $scope.singlePage['media'];
}
);
}
$scope.init();
}])
Try this code, it should work:
<div ng-controller="MyCtrl">
<div ng-show="array.length > 2">I'm visible</div>
<div ng-show="array.length > 3">I'm not visible</div>
</div>
function MyCtrl($scope) {
$scope.array = [
{id: 1},
{id: 2},
{id: 3}
];
}
This is JSFiddle with working example.
I want to note, that your question's code has a mistake: scopeName.lenght > 1
I think, that it would be better: scopeName.length > 1 :)
Please check this demo
<div ng-app="app">
<div ng-controller="myController">
<div ng-show="items.length">I am showing, items array is not empty</div><br />
<div ng-show="items.length > 1">I am showing, items array has more than one record</div><br />
</div>
</div>
var app = angular.module('app', []);
app.controller('myController', function ($scope) {
$scope.items = ["Apple", "Orange"];
});