I want to get an alert button for showing the filtered object of my filtered data in Angular.
In my HTML template i can get the object i want with: {{(portals|myFilter:or| filter:search )}}
I have my button :
<a ng-href='#here' ng-click='go()' >click me</a>
and my function go() is already working but now I need the object wich I can call with : {{(portals|myFilter:or| filter:search )}} in my go() function... Any idea?
I have already tried to write the object in the button but I didnt even believed that this is too easy. There must be a way to get the same object in my controller ?
<a ng-href='#here' ng-click='go(myFilter,search)' >click me</a>
You can assign filteredItems with the following syntax:
{{filteredItem = (portals|myFilter:or| filter:search )}}
<a ng-href='#here' ng-click='go(filteredItem)' >click me</a>
You can check the below snippet for an example.
angular.module("myApp", []).controller("myCtrl", function($scope) {
$scope.items = ["apple", "banana", "orange"];
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html>
<body ng-app="myApp">
<div ng-controller="myCtrl">
<input ng-model="query"/>
{{filteredItems = (items | filter:query)}}
<div>Filtered Items: {{filteredItems}}<div>
</div>
</body>
</html>
Related
I am making a game that has 50 buttons and everybutton has an identity as a color and an id. On clicking every button there color changes to what it has been defined. If the user clicks on the 25th button , he wins. Only three tries for clicking. I am however unable to do the first step of creating buttons. Please help. I use angularjs1.
<html ng-app="Bluebox">
<head>
<title>BlueBox</title>
<script src="angular.js"></script>
</head>
<body>
<div ng-controller="BoxController">
<button type="button" value = "bluebox" >
<li ng-repeat="x in boxlength">
{{index+1}}
</li>
</button>
</div>
<script>
angular.module("Bluebox",[])
.controller("BoxController",["$scope",function($scope){
$scope.boxlength=50;
$scope.index=0;
}])
</script>
</body>
</html>
Your ng-repeat is not at the right place. You want to repeat buttons.
<button ng-repeat="..." type="button" value="bluebox"></button>
Then the format of ng-repeat is not correct. This directive doesn't repeat a number of times, it repeats in an array.
What we usually do is create a method that create an array based on a number:
<button ng-repeat="i in times(number)" type="button" value="bluebox"></button>
Get number could look like:
$scope.number = 5;
$scope.times= function(x) {
return new Array(num);
}
Since the array created has indentical "values" you need to track by $index
function Main($scope) {
$scope.number = 50;
$scope.times= function(x) {
return new Array(x);
}
}
angular.module('test', []);
angular.module('test')
.controller('Main', Main);
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js"></script>
<div ng-app="test">
<div ng-controller="Main">
<button ng-repeat="i in times(number) track by $index" type="button">{{$index}}</button>
</div>
</div>
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 have made the following plunker:
https://plnkr.co/edit/Ff2O2TGC4WLaD62fJmvA?p=preview
I would like the value of the input to be the item.name clicked.
Here is the code:
<body ng-app="myApp">
<div ng-controller="MyController">
<ul ng-repeat="item in collection">
<li ng-click="edit('{{item.name}}')">{{item.name}}</li>
</ul>
</div>
<input name="myinput" ng-model="myinput" />
</body>
Js:
var app = angular.module('myApp', [])
.controller('MyController', function($scope, $http) {
$scope.collection = [
{name:'foo'},
{name:'bar'},
{name:'foobar'},
{name:'barfoo'},
];
$scope.edit = function(current_name) {
this.myinput = current_name;
console.log(current_name);
}
})
So there are a few problems here. The first is how you're passing item.name into the edit function. Instead of edit('{{item.name}}') it should simply be edit(item.name).
The next is this.myinput in the script.js isn't going to work; it needs to be $scope.myinput.
Finally, the input in the markup needs to be inside the div that defines the controller.
I've modified the Plunkr to work: https://plnkr.co/edit/mslpklTaStKEdo64FpZl?p=info
Angular expression can't have interpolation tags. Correct syntax, like if it was normal Javascript:
<li ng-click="edit(item.name)">{{item.name}}</li>
You don't have to call a function. Just do.
<li ng-click="$parent.myinput = item.name">
How do I implement delete on click of a tag? When I delete click something, the view is not reflected until I do refresh.
<div class="dropdown">
<span ng-repeat="tag in tag track by $index" data-toggle="dropdown">[[tag]]</span>
<!--<a data-toggle="dropdown" href="#">Dropdown trigger</a>-->
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li ng-click="deleteHashtag(p_id, tag, $index)" class="cursor">Delete</li>
<li class="divider"></li>
<li ng-click="showHashtags(tag)" class="cursor">View All</li>
</ul>
</div>
Below is the Angular code
$scope.deleteHashtag = function(p_id,hashtag, index){
$http.get("/api/hashtag/delete?contactId="+p_id.toString()+"&hashtag="+hashtag.toString())
.success(function(response){
console.log(response);
if(response.SuccessCode){
console.log("Deleted Tag");
}
else {
console.log("Delete fail");
}
});
$scope.hashtag.splice(index, 1);
};
Try putting the ng-repeat attribute inside the dropdown div. That way you will get a separate dropdown for each tag. You may need to turn the dropdown div into a span for it to look the same.
I wrote a little demo page that seems to do what you want. Click on each tag to bring up its own dropdown menu, then click delete and watch it go away. The demo code is below, and also lives in plunker here.
Some things to watch out for if you copy/paste:
The array of tags is called tags in my code. It was referred to as tag in your html and hashtag in your javascript.
I used $parent to access the dummy p_id variable since it's now being accessed from within the ng-repeat.
Good Luck!
<!doctype html>
<html ng-app="myApp">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
<script>
angular.module('myApp', [])
.controller('MyController', ['$scope', function($scope) {
$scope.tags = ['javascript', 'webgl', 'angularjs', 'twitter-bootstrap', 'jquery'];
$scope.p_id = 'some value';
$scope.deleteHashtag = function(p_id, hashtag, index) {
// I removed the api call here since I don't have access to it and
// it doesn't seem to be part of the problem. You may want to put
// the splice inside the success method instead of outside though.
console.log('delete hash tag ' + p_id + ' ' + hashtag + ' ' + index);
$scope.tags.splice(index, 1);
};
$scope.showHashtags = function(tag) {
console.log('show hash tags');
// some function that does something not related to the problem at hand.
};
}]);
</script>
<style>
.spacey { margin-left: 3px; margin-right: 3px;}
.cursor { cursor: pointer; }
</style>
</head>
<body>
<div ng-controller="MyController as ctrl">
<span class="dropdown cursor" ng-repeat="tag in tags track by $index">
<span class="label label-default spacey" data-toggle="dropdown">{{tag}}</span>
<ul class="dropdown-menu">
<li ng-click="deleteHashtag($parent.p_id, tag, $index)" class="cursor">Delete</li>
<li class="divider"></li>
<li ng-click="showHashtags(tag)" class="cursor">View All</li>
</ul>
</span>
</div>
</body>
</html>
Try this.tag
<li ng-click="deleteHashtag(p_id, this.tag, $index)" class="cursor">Delete</li>
In case its not working, please post ur angular code as well
Your <li ng-click="deleteHashtag(p_id, tag, $index)" class="cursor">Delete</li> element is outside ng-repeat, so you pass to the deleteHashtag function full tag list. ng-repeat repeats the element where it is inserted and every child element.
How can I store values to variable for example on click in angular? I have the following code which doesn't save the value into variable:
HTML:
<div ng-app='app'>
<a ng-controller="MyController" href="#" ng-click="variable = 1">
</a>
{{variable}}
</div>
Controller:
var app = angular.module('app',[]);
app.controller('MyController', function($scope)
{
});
jsfiddle code
Your variable binding {{variable}} should be inside controller's scope. So move ng-controller to an element that will contain variable binding.
You need to initialize the variable. See http://plnkr.co/edit/dmSNVJ3BGIeaWaddKtZe
<body ng-app="">
<button ng-click="count = 1" ng-init="count='not set'">
Increment
</button>
<span>
count: {{count}}
</span>
</body>
Use a function to set the variable:
HTML:
<div ng-app='app'>
<a ng-controller="MyController" href="#" ng-click="setVariable()">
</a>
{{variable}}
</div>
Controller:
var app = angular.module('app',[]);
app.controller('MyController', function($scope)
{
$scope.setVariable = function() {
$scope.variable = 1;
}
});
Your syntax is correct, what went wrong is you put your controller declaration in the wrong place.
You just need move it to the outer layer, no need for ng-init or function (but might be a better practice):
<div ng-app='app' ng-controller="MyController">
<a href="#" ng-click="variable=1">
click me!
</a>
{{variable}}
</div>
http://jsfiddle.net/ybavzec4/3/