<div ng-init="items=[{'id':1,'name':'Amit'}]">
<input type="text" size="40" ng-model="searchString" placeholder="Search">
<ul>
<li ng-repeat="i in items | filter:searchString">{{ i.id }}</li>
</ul>
</div>
Output :
<div ng-init="items=[{'id':1,'name':'Amit'}]">
<input type="text" size="40" ng-model="searchString" placeholder="Search" class="ng-pristine ng-untouched ng-valid ng-empty">
<ul>
<!-- ngRepeat: i in items | filter:searchString -->
</ul>
</div>
When I use single key value then it's not working.But when I use multiple key value like: [{'id':1,'name':'Amit'},{'id':2,'name':'Neeraj'}] then it's working.
What is the mistake in my code.
i double check this and its working
<html>
<body ng-app="">
<div ng-init="items=[{'id':1,'name':'Amit'}]">
<input type="text" size="40" ng-model="searchString" placeholder="Search">
<ul>
<li ng-repeat="i in items | filter:searchString">{{ i.id }}</li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
</body>
</html>
As you have single key, you can directly access it using items. Id, and items.name
When you have multiple value, you can use ng-repeat for a loop. Hope this might help you.
Related
I have option and input field:
<div data-ng-repeat="person in persons">
<select ng-model="person.username" ng-options="item as item.username for item in usernames" ng-change="fillInput()"></select>
<input type="text" ng-model="person.house" readonly="" required="">
<div ng-if="person.username">Full selected user info : {{ person.username | json}}</div>
</div>
I want to set input variable every time option is chosen.
Here is fiddle. It works fine if I remove data-ng-repeat="person in persons" But I need to be able to add few option fields.
Try this below code
<div ng-app="myApp" ng-controller="DemoCtrl">
<br><br>
<button ng-click="addNewChoice()">Add User</button>
<div data-ng-repeat="person in persons">
<select ng-model="person.username" ng-options="item as item.username for item in usernames" ng-change="fillInput()"></select>
<input type="text" ng-model="person.username.hname" readonly="" required="">
<div ng-if="person.username">Full selected user info : {{ person.username | json}}</div>
</div>
</div>
The change is in the below line
<input type="text" ng-model="person.username.hname" readonly="" required="">
You were referencing to invalid value. The variable person.username was not pointing anywhere and hence it was not working.
<div ng-app="myApp" ng-controller="DemoCtrl">
<br><br>
<button ng-click="addNewChoice()">Add User</button>
<div data-ng-repeat="person in persons">
<select ng-model="selectedPerson" ng-options="item as item.username for item in usernames" ng-change="fillInput()"></select>
<input type="text" ng-model="selectedPerson.hname" readonly="" required="">
<div ng-if="selectedPerson">Full selected user info : {{ selectedPerson | json}}</div>
</div>
</div>
Try this! http://jsfiddle.net/xr82a1gL/18/
I want to validate an angular form input and give it a class if is not $valid, the problem is, it´s inside a ng-repeat looping an array of int, and the input name is based on the $index:
<li ng-repeat="item in selectedItem.data.ax_ch">
<div ng-class="{'has-error':!form.ax_$index.$valid}">
<input type="text" id="ax_{{$index}}" name="ax_{{$index}}" ng-model="item" required=""/>
</div>
</li>
Everything gets the $index in the output, but the ng-class:
<li ng-repeat="item in selectedItem.data.ax_ch">
<div ng-class="{'has-error':!form.ax_$index.$valid}">
<input type="text" id="ax_0" name="ax_0" ng-model="item" required=""/>
</div>
</li>
What I expected it to be:
<li ng-repeat="item in selectedItem.data.ax_ch">
<div ng-class="{'has-error':!form.ax_0.$valid}">
<input type="text" id="ax_0" name="ax_0" ng-model="item" required=""/>
</div>
</li>
I have searched and people have similar problems but none of them have been solved so far. Is there any angular-super-hero-master-plus-advanced who can help me with it :) ?
Because you are constructing the property/key on form dynamically, you do the same thing you would in normal Javascript: use square["bracket"] notation.
Change your markup to:
<li ng-repeat="item in selectedItem.data.ax_ch">
<div ng-class="{'has-error':!form['ax_' + $index].$valid}">
<input type="text" id="ax_{{$index}}" name="ax_{{$index}}" ng-model="item" required=""/>
</div>
</li>
I'va just started learning Angular and can't manage an issue with ng-repeat.
I want to display every letter from input in a single span element. I tried many ways but nothing works.
Here's my code on codepen
Is this what you're looking for ?
Each letter will be printed in different span.
solution of Error: ngRepeat:dupes
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
});
.center-block {
float: none;
}
input {
margin: 20px;
}
span:hover {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl" class="container">
<div class="col-sm-10 center-block text-center">
<input type="text" class="form-control" placeholder="Type to search..." ng-model="word" />
<div ng-repeat="letter in word.split('') track by $index">
<span> {{ letter }} </span>
</div>
<br/><br/> If you want to split the word by line <br/><br/>
<div ng-repeat="letter in word.split(' ') track by $index">
<span> {{ letter }} </span>
</div>
</div>
</div>
You need to reference the alias Letter as opposed to Word
<div ng-app="myApp" ng-controller="myCtrl" class="container">
<div class="col-sm-10 center-block text-center">
<input type="text" class="form-control" placeholder="Type to search..." ng-model="word" />
<div ng-repeat="letter in word.split('') track by $index">
<span> {{letter }} </span>
</div>
</div>
</div>
EDIT
Apparently what is happening is word.split('') is not allowing any duplicates.
"thisisatest".split('') if this is input into the console, it splits you expect it to. I dont understand why word.split('') is removing duplicates. Type a string with unique chars into your codepen and it will display correctly.
EDIT
per p2. answer the track by $index tracks all duplicates. which fixes the issue. The split is resulting in duplicate items in an array and without track by $index angular is just not displaying the duplicates
You should also be using track by $index with ng-repeat to deal with Duplicate Key in Repeater
<div ng-app="myApp" ng-controller="myCtrl" class="container">
<div class="col-sm-10 center-block text-center">
<input type="text" class="form-control" placeholder="Type to search..." ng-model="word" />
<div ng-repeat="letter in word.split('') track by $index">
<span> {{letter }} </span>
</div>
</div>
</div>
So i have this html. The issues is that is changing the model(filter) when i select one of those that i have create in a static way but the dynamic ones does not trigger the change of the value. Any ideas?
Thanks.
<div class="row">
<div class="col-xs-6">
<h3>Group 1</h3>
<hr>
<div class="checkbox">
<input type="radio" name="filterGroup" ng-model="filter" ng-value="5"><label>5</label>
</div>
<div class="checkbox">
<input type="radio" name="filterGroup" ng-model="filter" ng-value="4'"><label>4</label>
</div>
</div>
<div class="col-xs-6">
<h3>Group 2</h3>
<hr>
<div class="checkbox">
<input type="radio" name="filterGroup" ng-model="filter" ng-value="3"><label>3</label>
</div>
<div class="checkbox">
<input type="radio" name="filterGroup" ng-model="filter" ng-value="2'"><label>2</label>
</div>
<div class="checkbox">
<input type="radio" name="filterGroup" ng-model="filter" ng-value="1"><label>1</label>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<h3>DinamicItems</h3>
<hr>
<div class="checkbox" ng-repeat="item in items">
<input type="radio" name="filterGroup" ng-model="filter" ng-value="'{{item.value}}'"><label>{{item.text}}</label>
</div>
</div>
</div>
What Charlie is saying is, your model of tag is a primitive one. Each instance of ng-repeat creates it's own scope. Therefore, your models, although named 'tag', are not in fact the same.
To remedy, you should make your model something like vm.tags (vm = view model.)
A few things to read up on, and learn more:
Controller As: https://johnpapa.net/angularjss-controller-as-and-the-vm-variable/
ng-repeat: https://docs.angularjs.org/api/ng/directive/ngRepeat
Understanding Scopes https://github.com/angular/angular.js/wiki/Understanding-Scopes (When I was getting started with Angular, I had to read through this a few times, and still do on occasion)
I have a grouped nested object that I want to filter. The filter works only on the second group.
<input type="radio" ng-model="grouping" value="name" />Name
<input type="radio" ng-model="grouping" value="date" />Gender
<input type="radio" ng-model="grouping" value="jsonpath" />Hair
<input type="text" ng-model="searchInput" />
<div data-ng-repeat="(group, details) in group(reports, grouping) | filter:searchInput">
<h2>{{group}}</h2>
<ul>
<li data-ng-repeat="report in details | filter:searchInput">
{{ report.name }}
</li>
</ul>
</div>
Here is the fiddle: http://jsfiddle.net/Tropicalista/aF2aL/15/
[UPDATE]
I have an updated plunker, not sure if i'm on the right direction: http://plnkr.co/edit/MYkTJoAIXV2XEN6glrDQ?p=preview
What is the purpose to put the filter on the outer repeater? Just remove it.
<div data-ng-repeat="(group, details) in group(reports, grouping)">
Demo