Using an array, I am trying to filter and show the unique information in the list. For that I use the angular inbuild filter method.
But I am getting error.
Here is my try (I am filtering by SubProjectName)
<ul>
<li ng-repeat="project in projectNames | unique: 'SubProjectName' ">
{project.SubProjectName}}
</li>
</ul>
Live Demo
AngularJS doesn't include a unique filter by default. You can use the one from angular-filter. Just include the JavaScript
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.8/angular-filter.min.js"></script>
and include the dependeny in your app:
var app = angular.module('myApp', ['angular.filter']);
Your code should work right away! I edited your Plunker so it works.
I think you are looking for an answer like this
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.projectNames=projects
$scope.Id = "1";
$scope.SubProjectName="Retail Building";
})
.filter('unique', function() {
return function(projects, subProjectName) {
var newprojects =[];
projects.forEach(function(project){
if(project.SubProjectName === subProjectName)
newprojects.push(project);
});
return newprojects;
};
});
<li ng-repeat="project in projectNames | unique:SubProjectName">{{project.SubProjectName}}</li>
Demo
The unique filter you are probably attempting to use comes from AngularUI, so you need to include it:
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.js"></script>
and add it as module dependency:
var app = angular.module('plunker', ['ui.filters']);
I have updated your plunkr as http://plnkr.co/edit/sx3u1ukH9752oR1Jfx6R?p=preview
added filter dependency
var app = angular.module('plunker', ['angular.filter']);
Hope this may help you
Related
I made a jsfiddle here to make angular question: https://jsfiddle.net/b6xgjfwg/
<div ng-controller="AppCtrl">
Hello {{name}}
</div>
var app = angular.module('app',[]);
function AppCtrl($scope) {
$scope.name = 'Sally';
}
same as http://jsfiddle.net/thomporter/tcVhN/
But not working.
I am new to jsfiddle and help me.
Please see below screen show. You can see that I specified to load my angular in the head (no-wrap) and also reformatted my code to be more "correct"
try this instead
var app = angular.module('app',[]);
app.controller('AppCtrl', function AppCtrl($scope) {
$scope.name = 'Sally';
});
I'm trying to develop a solution through AngularJS where when the user changes the profile image, all other photos based on their profile are also changed.
How can I start developing this feature?
Thanks in advance!
[Solution]
With the help of the #wolfman6377, I can understand the functionality and develop the solution for what I need. I'll leave an example in CodePen.
CodePen
var myApp = angular.module('myApp',[]);
myApp.controller('myController', function() {
this.myVar = 'https://robohash.org/asd'
this.updatePicture = function() {
this.myVar = 'https://angular.io/resources/images/logos/angular/angular.png';
};
});
Thank you, #wolfman6377.
You are using a jQuery-like strategy. jQuery element selector will not be able to change the value of myVar.
I would recommend going through some basic tutorials on angular1. But in a nutshell, you need to:
Do not grab elements and change attributes
add a module to the ng-app value
Use ng-controller in the template
Add ng-click to the button to update the value of myVar
template
<body ng-app="myApp">
<div id="var" ng-controller="myController as vm">
<img ng-src={{vm.myVar}} />
<button ng-click="vm.updatePicture()">Click me</button>
</div>
</body>
controller:
angular
.module('myApp', [])
.controller('myController', function() {
this.myVar = 'https://www.w3schools.com/angular/pic_angular.jpg'
this.updatePicture = function() {
this.myVar = 'https://angular.io/resources/images/logos/angular/angular.png';
};
});
I have read about the module way of defining a filter:
myApp.filter('filtername', function() {
return function() {
};
});
But what if I am using a simple function controller for my angular app and not as a module?
I.e. all I have at the top of my html is:
<html ng-app ng-controller="MyApp">
and then I include a js file with a simple controller:
function MyApp($scope, $http){
}
but I need to define a custom filter - in my particular case I'm trying to order an ngRepeat using Justin Klemm's object ordering filter. So how can I define a filter not using the module style syntax?
If you want create a new filter in your app you could define the your custom filter like below:
in your js
angular.module("yourModule")
.filter("yourFilretName",function(){
return function(value,arg1,arg2 .....){
var result = [];
// filter processing the object that pass the filtering, must be push on the result array
return result;
}
})
in your template
<your-tag ng-repeat="book in bookList | yourFilretName :arg1:agr2:....:argn>
.....
</your-tag>
<div ng-app="myApp" ng-controller="myCtrl">
<ul>
<li ng-repeat="item in items | filter: myFilter">{{ item }}</li>
</ul>
...
var myApp= angular.module("myApp", []);
myApp.controller('myCtrl', function($scope ) {
function myFilter(item) {
return item == "some condition"
}
})
When I run $getIndex() on my projects node I get an empty array. Why? and am I using it incorrectly?
Here's a fiddle http://jsfiddle.net/G55jS/1/
js
angular.module('todo', ['firebase']);
angular.module('todo').controller('TodoCtrl', function($scope, $firebase) {
var projectsUrl = "https://ionic-guide-harry.firebaseio.com/projects/";
var projectRef = new Firebase(projectsUrl);
$scope.projects = $firebase(projectRef);
$scope.projects.$on('loaded', function() {
$scope.keys = $scope.projects.$getIndex();
});
});
html
<div ng-app="todo" ng-controller="TodoCtrl">
<div ng-view>
{{keys}}
</div>
</div>
Screen cap of my data layout
Seems like it's a known bug and has been fixed. Will be fixed in the upcoming release https://github.com/firebase/angularFire/issues/262
Update: the fix was merged into the 0.7.1 release
I don't know what's wrong here. An explanation would be lovely. Thanks!
http://jsfiddle.net/natecraft/xKtwP/13/
<body data-ng-app="channelApp">
<div data-ng-controller="channelController">
Hello! {{ name }}
</div>
</body>
var mod = angular.module("channelApp", []);
mod.controller = ("channelController", function($scope) {
$scope.name = "nate";
});
There are two separate issues causing this unexpected behavior. First, the syntax for the controller should be like this:
var mod = angular.module("channelApp", []);
mod.controller("channelController", function($scope) {
$scope.name = "nate";
});
Second, the fiddle is setup incorrectly and still won't render properly after making the above fix. I have fixed the fiddle configuration in this forked version of your fiddle.
I also created the code example in CodePen for further reference.