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'm developing an ionic app for a WordPress site, so I'm consuming JSON data to load it into the app.
I successfully load my posts from the site but and when I try to filter the data receipts from simple field (fields of my JSON), it load the result filtered successfully
This example works :
<ion-item class="item item-thumbnail-left item-text-wrap item-icon-right" ng-repeat="post in recent_posts |filter:{date:searchtext}" >
but when I try to filter with a custom field, I cannot access to this field and can't get any result
this is some of my code that doesn't work correctly ( the custom field is trav_accommodation_address )
<label class="item item-input">
<input type="text" placeholder="Search here" ng-model="searchtext" ng-change="showSelectValue(searchtext)">
</label>
<ion-item class="item item-thumbnail-left item-text-wrap item-icon-right" ng-repeat="post in recent_posts |filter:{trav_accommodation_address:searchtext}" >
This is my JSON data
http://www.jneyne.com/api/get_post/?post_type=accommodation&id=2629
Try this :
<ion-item class="item item-thumbnail-left item-text-wrap item-icon-right" ng-repeat="post in recent_posts | filter: { custom_fields: { trav_accommodation_address: searchtext } }" >
trav_accommodation_address is under custom_fields so above should work
I have a search field at the top, which is just a filter, like this:
<div class="bar bar-subheader bar-light">
<label class="item item-input item-floating-label">
<i class="icon ion-search placeholder-icon"></i>
<input type="text" size="100" ng-model="q" placeholder="Search" ng-submit="closeKeyboard()" />
</label>
With the filter picking up the ng-model = "q" and filtering on:
<div class="card" ng-repeat="item in ofertass | filter:q | orderBy:someModel | unique: 'cadastra_oferta_cod_oferta'" ng-init="$last ? fireEvent() : null">
That works very well, but the client wants that, when he clicks the "Go" or "OK" button of the keyboard, it closes. How can I do this?
This filter is already filtering automatically.
There are a lot of questions similar to this where the thing being filtered in an ng-repeat is a property of an object, but my question is different. My filter itself is applying to an array collection of objects with nested properties, and the dot notation isn't working.
Like so:
<div class="col-sm-4"><div id="searchContainer" style="position:relative;text-align:center;">
<label for="search-input"><i class="fa fa-search"></i></label>
<input id="search-input" ng-model="userInputSearch" placeholder="Student Name" autocorrect="off" tabindex="1">
</div></div>
<div class="col-sm-4"><div id="searchContainer" style="position:relative;text-align:center;">
<label for="search-input"><i class="fa fa-search"></i></label>
<input id="search-input" ng-model="audioInputSearch" placeholder="Audio Name" autocorrect="off" tabindex="1">
</div></div>
<!-- Search Bars Above, Ng-Repeat Below -->
<div class="col-sm-4" ng-repeat="a in audio | filter:{ uploader: userInputSearch } | filter: {audio.name: audioInputSearch} track by $index ">
<div class="tile nobig #{{colors[$index]}}">
#{{a.audio.name}}</br>
Uploaded By <a class="white" target="_self" href="http://example.com/user/#{{a.audio.user_id}}">#{{a.uploader}}</a>
</br>
Length: #{{a.audio.Length|HHMMSS}}</br>
<i class="fa ear fa-play"></i>
</br></br>
</div>
</div>
The array of objects I am repeating over:
[{"audio":{"id":"43","user_id":"74","name":"controlla","url":"controlla.wav","Length":"234","LengthD":"short","ForTask":"True","created_at":"2016-06-21 13:06:06","updated_at":"2016-06-21 13:06:06"},"uploader":"Summer"},{"audio":{"id":"52","user_id":"74","name":"roywoodshowifeel","url":"roywoodshowifeel-56e65.wav","Length":"225","LengthD":"short","ForTask":"True","created_at":"2016-06-21 22:11:15","updated_at":"2016-06-21 22:11:15"},"uploader":"Summer"},{"audio":{"id":"53","user_id":"74","name":"bodman","url":"bodman-fc378.wav","Length":"194","LengthD":"short","ForTask":"True","created_at":"2016-06-22 00:05:41","updated_at":"2016-06-22 00:05:41"},"uploader":"Summer"},{"audio":{"id":"54","user_id":"74","name":"shake070sundaynight","url":"shake070sundaynight-6119e.wav","Length":"274","LengthD":"short","ForTask":"True","created_at":"2016-06-22 00:09:05","updated_at":"2016-06-22 00:09:05"},"uploader":"Summer"},{"audio":{"id":"55","user_id":"74","name":"audio1","url":"audio1-f895c.wav","Length":"121","LengthD":"short","ForTask":"True","created_at":"2016-06-22 01:45:39","updated_at":"2016-06-22 01:45:39"},"uploader":"Summer"},{"audio":{"id":"56","user_id":"74","name":"audio2","url":"audio2.wav","Length":"726","LengthD":"short","ForTask":"True","created_at":"2016-06-22 01:46:05","updated_at":"2016-06-22 01:46:05"},"uploader":"Summer"},{"audio":{"id":"59","user_id":"74","name":"loner","url":"loner-2070b.wav","Length":"209","LengthD":"short","ForTask":"True","created_at":"2016-06-22 01:57:51","updated_at":"2016-06-22 01:57:51"},"uploader":"Summer"},{"audio":{"id":"60","user_id":"74","name":"comeandseeme","url":"comeandseeme-41399.wav","Length":"232","LengthD":"short","ForTask":"True","created_at":"2016-06-22 01:58:28","updated_at":"2016-06-22 01:58:28"},"uploader":"Summer"},{"audio":{"id":"61","user_id":"74","name":"loner","url":"loner-1d416.wav","Length":"209","LengthD":"short","ForTask":"True","created_at":"2016-06-22 01:58:30","updated_at":"2016-06-22 01:58:30"},"uploader":"Summer"},{"audio":{"id":"63","user_id":"74","name":"comeandseeme","url":"comeandseeme-d41e7.wav","Length":"232","LengthD":"short","ForTask":"True","created_at":"2016-06-22 02:03:02","updated_at":"2016-06-22 02:03:02"},"uploader":"Summer"},{"audio":{"id":"64","user_id":"74","name":"nopolice","url":"nopolice-0b883.wav","Length":"258","LengthD":"short","ForTask":"True","created_at":"2016-06-22 02:12:57","updated_at":"2016-06-22 02:12:57"},"uploader":"Summer"},{"audio":{"id":"65","user_id":"74","name":"ovo","url":"ovo.wav","Length":"4080","LengthD":"long","ForTask":"True","created_at":"-0001-11-30 00:00:00","updated_at":"-0001-11-30 00:00:00"},"uploader":"Summer"}]
So how do I get it to filter by audio.name without throwing an unexpected . error?
I have a collection-repeat element with lots of data on the view and I want to change its sorting when I select an option from the element. Although it assigns the correct value to the $scope.isAscending variable, collection-repeat list is not updating.
<ion-view cache-view="false">
<ion-content on-scroll="onContentScroll()">
<div class="list">
<label class="item item-input item-select item-light">
<div class="input-label">
Sorting:
</div>
<select ng-model="selectField" ng-change="chooseSorting(selectField)">
<option value="true">ascending</option>
<option value="false">descending</option>
</select>
</label>
<label class="item item-input">
<i class="icon ion-ios-search placeholder-icon"></i>
<input type="text" placeholder="Search" ng-model="q">
</label>
</div>
<div collection-repeat="item in items | orderBy: item.year: !isAscending | itemFilter: q | groupByProperty" divider-collection-repeat>
<ion-item class="item item-thumbnail-left item-button-right">
<a class="item-thumbnail-left" ng-click="openModal(item)">
<h3>{{item.name}}</h3>
<p>{{item.properties[0]}}</p>
<p>{{item.properties[3]}}</p>
</a>
</ion-item>
</div>
</ion-content>
</ion-view>
I tried to call $scope.$apply(function(){$scope.isAscending = value}) after the option was specified, It updates the scope value, but it doesn't refresh the repeating list, $state.go() doesn't work either.
Is there a way to refresh collection-repeat list ?
If I understood your question well, you want to filter the year based on select changes, right?
If so, first you don't need to use ng-change and second orderBy filter just needs the property (in your case year).
Change your select to:
<select ng-model="selectField">
<option value="">ascending</option>
<option value="false">descending</option>
</select>
Change your repeat to:
<div collection-repeat="item in items | orderBy: year: selectField | itemFilter: q | groupByProperty" divider-collection-repeat>
Take a look on docs of orderBy filter.