I am trying to figure how to show or hide a list of ids and references, filtered by name with an input text.
The problem is that the list of items is going to be very long and I'd like the list to be hidden FIRST then SHOWN and FILTERED whenever I type something in the input that matches an existing item reference.
I tried to add a NG-SHOW directive in a <div> containing my NG-REPEAT but then nothing shows up...
like this:
Here's what I did : http://plnkr.co/edit/HVI7iAHdkLJJhGeN9DT0?p=preview
Commented out the ng-show!
Thx in advance
If I'm understanding you correctly, you don't want the list to show until someone tries to filter the list. If thats the case, just hide the list until the input has a length.
<ul ng-show="searchInput.length">
<li data-ng-repeat="item in items | filter: searchInput">{{ item.id }} {{ item.ref }} </li>
</ul>
http://plnkr.co/edit/HiibcFBahpXdux5YlOrh?p=preview
<body>
<div data-ng-controller="CTController">
Reference
<br/>
<input type="text" data-ng-model="searchInput" />
<!--<div data-ng-show="showIt(searchInput)">-->
<ul ng-if="searchInput">
<li data-ng-repeat="item in items | filter: searchInput">{{ item.id }} {{ item.ref }}</li>
</ul>
<!--</div>-->
</div>
</body>
I understand that you only need to show specific items when searched. For this, you don't have to pass value to that function. simple write model name in ng-show to show specific items when searched.
You can check this article for more information: http://blog.hfarazm.com/filters-in-angularjs/
<!doctype html>
<html data-ng-app="ColisType">
<head>
<script type="text/javascript" src='//ajax.googleapis.com/ajax/libs/angularjs/1.2.20/angular.min.js'></script>
<script type="text/javascript" src='script.js'></script>
</head>
<body>
<div data-ng-controller="CTController as abc">
Reference
<br/>
<input type="text" ng-model="searchInput" />
<div ng-show="searchInput">
<ul>
<li ng-repeat="item in items | filter: searchInput">{{ item.id }} {{ item.ref }}</li>
</ul>
</div>
</div>
</body>
</html>
Related
I have created an array example. There is a text box that accepts the number and on clicking on add, it adds the number to a defined array. And on display i want it to display the array. But what is happening is, as soon as i click on add button, the number simultaneously is being displayed on the HTML page. I guess its because of ng-model, but i want it to be displayed only when i click on display button. Please help.
<html ng-app="Swabhav.Array">
<head>
<title>Array</title>
<script src="angular.js"></script>
</head>
<body>
<div ng-controller="ArrayController">
<input type="text" ng-model="arraynumber">
<button type="button" value="Add" ng-
click="addElementToArray(arraynumber)">Add</button>
<button type="button" value="Display" ng-
click="displayElementsInArray()">Display</button>
<li ng-repeat="element in elements track by $index ">
<h4> {{element}} </h4>
</li>
</div>
<script>
angular.module("Swabhav.Array",[])
.controller("ArrayController",
["$scope","$log",function($scope,$log){
$scope.numbers=[];
$scope.number="";
$scope.addElementToArray=function(number){
$scope.numbers.push(number);
$log.log("inside add "+ $scope.numbers)
}
$scope.elements=[];
$scope.displayElementsInArray=function(){
$log.log("Inside Display")
$scope.elements.push($scope.numbers);
}
}])
</script>
</body>
</html>
You can try like the below code, also check this working plunker link for your example scenario.
Controller:
$scope.numbers=[];
$scope.elements=[];
$scope.addElementToArray=function(number){
$scope.numbers.push(number);
$scope.arraynumber='';
};
$scope.displayElementsInArray=function(){
angular.extend($scope.elements, $scope.numbers)
};
I got some problem on AngularJS.
my controller, mainCtrl, has this variables :
this.colors = {Sam:blue,Jane:red,Tom:pink};
this.arr = [{person:'Sam',story:'some story'},{name:'Tom',story:'some story2'}]
And I got this code :
<div ng-controller="mainCtrl as vm">
<ul ng-repeat="obj in arr">
<li ng-style={color:vm.color[obj.person]}>{{obj.story}}</li>
</ul>
</div>
I want that the li will be colored such as the color of the person at colors dictionary . how can I handle that? I got undefined every time, but when I do it explictly its work , for Example :
<li ng-style={color:vm.color['Sam']}>{{obj.story}}</li>
You are using the controllerAs-Syntax, so you must use vm.arr in your ng-repeat. And furthermore you should use the ng-repeat on the list item:
<ul>
<li ng-repeat="obj in vm.arr" ng-style="{color:vm.color[obj.person]}">{{obj.story}}</li>
</ul>
It should look like this.
<div ng-controller="mainCtrl as vm">
<ul>
<li ng-repeat="obj in vm.arr track by $index"
ng-style="{'color':vm.colors[obj.person]}"
ng-bind="obj.story">
</li>
</ul>
</div>
Remember to use your alias vm (controllerAs)
Usetrack by with ng-repeat for better performance.
I think that ng-repeat should have been placed in li
Her's a working jsfiddle http://jsfiddle.net/irhabi/nh4ddemr/
Ok, here you go guys.
I am learning Angular and wondering how to order items (array of strings). I know that there are different ways using controller etc, but I am just starting to learn it from today.
Was wondering if there is a way to orderBy on names? I know orderBy can be applied to a property name in array of objects if we have, but placing it in ng-repeat.
But how to achieve it in my code below?
EDIT: I need the orderby both on initial display on page load, as well as when the user types something in the textbox when it filters.
<html data-ng-app="">
<head>
<title></title>
</head>
<body data-ng-init="names=['Sita','Ram', 'Amit','Cat','Boushick' ] ">
<input type="text" name="txtName" data-ng-model="typedName" />
<br />
Typed Name is: {{ typedName }}
<br />
Names:
<ul |orderBy:'names' >
<li data-ng-repeat="personName in names | filter:typedName "> {{ personName | uppercase}}
</li>
</ul>
<script src="Scripts/angular.min.js"></script>
</body>
</html>
yes use orderBy as ,
<li data-ng-repeat="personName in names | orderBy:personName | filter:typedName "> ...
here is the Demo Plunker
Use orderBy:'toString()' before filter :)
<li data-ng-repeat="personName in names | orderBy:'toString()'|filter:typedName "> {{ personName | uppercase}}
Here is Plunker
So I'm trying to zebra stripe my ng-repeat so the rows can be easily distinguished.
I think I have everything wired up correctly, but the classes just aren't being applied.
I've created a plunker here.
My html looks like this:
<div ng-repeat="removal in removals" ng-class-even="even" ng-class-odd="odd" class="remove-relation-titles-list">
<div class="pull-left relation-titles-left-list">
<span class="acct-title acct-num">{{removal.AcctType}} {{removal.AcctNo}}</span>
<span class="acct-title"> - Standard Checking</span>
</div>
</div>
So, the regular class is being applied just fine, but the even and odd ones aren't at all. If you inspect the object and add the even class yourself, it shows up beautifully. I've tried moving this down to the div inside the ng-repeat with no results.
Am I missing something obvious?
Change your ng-class to:-
ng-class="{'even':$even,'odd':$odd}"
Plnkr
$even and $odd are the properties added by ng-repeat on its scope.
or change it to take string value of the class names otherwise it will try to replace the class based on the property even or odd which does not exist:-
ng-class-odd="'odd'" ng-class-even="'even'"
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js" data-semver="1.2.17" data-require="angular.js#1.0.7"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="removeTitlesCtrl">
<div id="body_content_wrapper">
<div>
<h4 class="heading toggle header-block">These are the accounts chosen</h4>
</div>
<div ng-repeat="removal in removals" ng-class-even="'even'" ng-class-odd="'odd'" class="remove-relation-titles-list">
<div class="pull-left relation-titles-left-list">
<span class="acct-title acct-num">{{removal.AcctType}} {{removal.AcctNo}}</span>
<span class="acct-title"> - Standard Checking</span>
</div>
</div>
</div>
</div>
</body>
</html>
This is a simple mistake please correct.
ng-class-even="'even'" ng-class-odd="'odd'"
I've got the following markup:
<li ng-repeat="month in months">
<!-- NOTE THAT THIS IS WORKING IN ALL BROWSERS -->
<div class="cm-month-grid" ng-style="{width:{{month.pos.width}}+'px', left:{{month.pos.left}}+'px'}">
<div class="cm-month-title" title="{{month.date.format('DD.MM.YY')}} {{month.pos | json}}">{{month.date.format('MMM.YY')}}</div>
<div class="cm-month-border"></div>
</div>
</li>
that runs fine, but this is not:
<li ng-repeat="unit in units | filter: filter.text">
<div class="cm-periods">
<!-- BUT THIS IS NOT WORKING... WHY....
<div ng-repeat="period in unit.periods" class="cm-period" ng-style="{width:{{period.pos.width}}+'px', left:{{period.pos.left}}+'px'}" data-period="{{.}}}">
<span >{{period.start.format('DD.MM.YY')}}</span>
<div style="background: pink;" ng-style="{width:{{period.pos.width}}+'px', left:{{period.pos.left}}+'px'}">jalla</div>
</div>-->
<!-- WORKING IN CHROME ONLY -->
<div ng-repeat="period in unit.periods" class="cm-period" style="width:{{period.pos.width}}px; left:{{period.pos.left}}px;" data-period="{{.}}}">
<span>{{period.start.format('DD.MM.YY')}}</span>
</div>
<!-- -->
</div>
</li>
Full example could be seen here: http://plnkr.co/edit/aZsZEM?p=preview
I know there are issues with style and IE, that's why I'm using the ngStyle, but it does not update it style (try clicking on the zoom in the full example in IE)
Thanks for any help
Larsi
You are using ng-style with double curly brackets. As far as I know that's not valid in an expression.
Try this:
<div ng-repeat="period in unit.periods" class="cm-period" ng-style="{'width':period.pos.width+'px', 'left':period.pos.left+'px'}" data-period="{{.}}}">
<span >{{period.start.format('DD.MM.YY')}}</span>
<div style="background: pink;" ng-style="{'width':period.pos.width+'px', 'left':period.pos.left+'px'}">jalla</div>
</div>
</div>
Hmm, still looks messy to me. But, HEY! it zooms! (in FF)
Uh, forgot: Forked Plunk