I have found a really strange issue with my ionic form, basically I have a single input that is no different from any of the others but if the content is longer than the input box, it seems to disappear but appear with a few actions (see GIF)
Has anyone seen this before?
Code which powers the forms,
<ion-view>
<ion-content class="padding" style="padding-top: 0px;" scroll="true" has-bouncing="true">
<ion-refresher class="primary-color" pulling-text="Refresh" on-refresh="vm.update();" spinner="none">
</ion-refresher>
<div class="group-list list list-inset" style="padding: 14x;">
<label ng-repeat="field in vm.model.Fields | filter: vm.fieldFilter" class="item item-input editor-field">
<span class="input-label font-thin">{{field.Name}}</span>
<input type="text" class="primary-color" placeholder="{{field.Editor === 'readonly' ? 'Readonly' : 'Update'}}"
ng-class="{readonly: field.Editor === 'readonly'}"
ng-model="field.Value"
ng-click="vm.editorFor(field)"
ng-disabled="field.Editor === 'readonly'"/>
</label>
</div>
</ion-content>
</ion-view>
Related
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.
Code:
<!--searchbar-->
<label class="item item-input" id="winzer-search3">
<i class="icon ion-search placeholder-icon"></i>
<input type="search" ng-model="search" placeholder="">
</label>
<!--Spacer-->
<div class="spacer" style="width: 300px; height: 24px;"></div>
<!--Wine List-->
<ion-list id="weine-list6" class="manual-list-fullwidth">
<ion-item ng-repeat="wine in WinesOfEvent | filter:search" class="item-icon-right" id="weine-list-item28" ui-sref="winetastic.weinDetails" ng-click="setWine(wine)">
<i class="icon ion-ios-wineglass"></i>{{wine.wineyear}}
</ion-item>
</ion-list>
Everytime when I want to search after things I get a very weird list back.
Here are some examples
It doesn't search when I put only one number in the searchbar.
This should give me an empty list.
I can even search after letters and get results.
Whats wrong with my code?
WinesOfEvent looks like this:
[{"id":"eebedd09-a64c-43ac-80e8-2c8b54fdea1d","qualitylevel":"DAC","wineyear":2013,"region_description":" ","winzer_ID":"458a5050-5256-47b6-9986-397df3d26eb3","winetype_ID":"18e9da94-2795-46d2-a321-8620094a0be9","winetypename":"Cabernet"},{"id":"1b03e718-ee01-4297-9425-411c9716377c","qualitylevel":" ","wineyear":2012,"region_description":" ","winzer_ID":"458a5050-5256-47b6-9986-397df3d26eb3","winetype_ID":"ef2007cf-f776-484b-9829-883747d951b8","winetypename":"Steinberg"},{"id":"0a9bb7aa-f23c-487f-9848-9307e426fec6","qualitylevel":" ","wineyear":2014,"region_description":" ","winzer_ID":"458a5050-5256-47b6-9986-397df3d26eb3","winetype_ID":"c54fea22-8111-4cfc-bdd9-64298d6c7f54","winetypename":"Zweigelt"},{"id":"9318c4f2-650a-4209-8a7e-d0d49e1d3be3","qualitylevel":"","wineyear":2011,"region_description":"Diabas","winzer_ID":"458a5050-5256-47b6-9986-397df3d26eb3","winetype_ID":"637b193c-d57f-479a-86d1-4dcb5bce6de4","winetypename":"Blaufränkisch"},{"id":"c34a87f2-2ce6-4f9a-88e8-b7beec8f2245","qualitylevel":"DAC Reserve","wineyear":2013,"region_description":" ","winzer_ID":"458a5050-5256-47b6-9986-397df3d26eb3","winetype_ID":"637b193c-d57f-479a-86d1-4dcb5bce6de4","winetypename":"Blaufränkisch"},{"id":"8af68c20-9e53-4e78-8f64-3a59bd8d9ff0","qualitylevel":" ","wineyear":2012,"region_description":" Merlot","winzer_ID":"458a5050-5256-47b6-9986-397df3d26eb3","winetype_ID":"c54fea22-8111-4cfc-bdd9-64298d6c7f54","winetypename":"Zweigelt"},{"id":"bdc1442f-7abf-4fe8-99bf-0e3df8ecd0db","qualitylevel":"","wineyear":2012,"region_description":"Diabas","winzer_ID":"458a5050-5256-47b6-9986-397df3d26eb3","winetype_ID":"18e9da94-2795-46d2-a321-8620094a0be9","winetypename":"Cabernet"}]
i want to remove the border around the ionic-toggle
<ion-content ng-init="checkarrivee.getAllListeCriteres();">
<div class="swipe" on-swipe-left="warn('Must use scope')">Swipe div</div>
<div class="list" style="width: 95%;margin-left: 2%">
<span us-spinner="{color: 'blue', radius:30, width:8, length: 16}" spinner-key="spinner-0"></span>
<label class="item item-input item-stacked-label">
<span class="input-label">Mission en cours :</span>
<input ion-autocomplete name="vehicule" type="text" readonly="readonly" class="ion-autocomplete"
items-clicked-method="itemsClicked(callback)"
items-removed-method="itemsRemoved(callback)"
placeholder="Séléctionner une mission"
items-method="getMissionEnCours(query)"
external-model="initialCountry"
item-view-value-key="codeDeFicheDeMission"
items-method-value-key="items"
max-selected-items="1"
autocomplete="off"
ng-model="checkarrivee.ficheDeMission"
required/>
</label>
</div>
<ion-list ng-repeat="(key,value) in checkload | groupBy:'Niveau'">
<div class="item item-divider" >{{key}}</div>
<ion-item on-swipe-left="warn('Must use scope')" ng-repeat="var in value" >
<ion-toggle ng-model='checkarrivee.boo[var.id]' ng-click="checkarrivee.isMissionSelected(var.id,checkarrivee.ficheDeMission.id)" toggle-class="toggle-positive">{{var.designation}}</ion-toggle>
<button class="button button-clear icon ion-star button-assertive"
ng-click="toggleStar(var)" ng-show="var.star">
</button>
<ion-option-button class="button-dark" >
<i class="icon ion-star"></i>
</ion-option-button>
</ion-item>
</ion-list>
image:
If you do not want the border to show for the toggle's just add style='border:0;' like this:
<ion-toggle style="border:0;" ng-model='checkarrivee.boo[var.id]' ng-click="checkarrivee.isMissionSelected(var.id,checkarrivee.ficheDeMission.id)" toggle-class="toggle-positive">{{var.designation}}</ion-toggle>
But I would suggest not using inline CSS, and instead adding all styling to your css/scss file as it will become much more difficult to maintain as the project scales.
EDIT:
For the CSS it will be something like this .list .item .noToggleBorder{border:0;}
Here's a codepen for you to check it out.
I am trying to set the value of input equal to the item in ion-list based on a click event. The value updates on first click event but is not updating on later clicks
<ion-view view-title="Add Cities">
<ion-content>
<label class="item-input-wrapper bar-subheader">
<i class="icon ion-android-search placeholder-icon"></i>
<input style="width:100%" type="text" placeholder="Search" ng-model="CityName">
</label>
<ion-button class="button ion-plus button-positive" ng-click="addCity(CityName)" >Add</ion-button>
<div class="list">
<ion-list>
<ion-item ng-repeat="item in states|filter:CityName" ng-click="set(item)">
{{item}}
</ion-item>
</ion-list>
</ul>
</div>
</ion-content>
</ion-view>
associated function in controller.js
$scope.set=function(title){
$scope.CityName=title;
console.log(title);
}
i have checked console the function triggers but the input updates only once
i have tried adding $scope.$apply() in function set but it's still not working. Please suggest edits in the above code or is there a better method to do the same?
The answer is explained here by #Pankaj Parkar
My problem was fixed by renaming ng-model="CityName" to ng-model="data.CityName"
<input style="width:100%" type="text" placeholder="Search" ng-model="data.CityName">
and changing this
$scope.set=function(title){
$scope.CityName=title;
console.log(title);
}
to
$scope.set=function(title){
$scope.data={'CityName':title};
console.log(title);
}
I have an ionic list. I want to bind data to the list when a button is clicked.
$scope.searchY = function(){$scope.youtubeParam = {
key: 'myKey',
type: 'video',
maxResults: '10',
part: 'id,snippet',
q: $scope.searchKey ,
order: 'date',};
$http.get('https://www.googleapis.com/youtube/v3/search', {params:$scope.youtubeParam}).success(function(response){
$scope.myVideos = response.items;
angular.forEach(response.items, function(child){
console.log (child);
});
});
I put an event on my search TextBox like this.
<ion-content>
<div>
<label class="item item-input">
<i class="icon ion-search placeholder-icon"></i>
<input type="search" placeholder="Search" ng-enter="searchY()" ng-model="searchKey">
</label>
</div>
<!--<div class="embed-responsive embed-responsive-16by9"><youtube-video video-id="theBestVideo"></youtube-video></div>-->
<div data-ng-controller="AppCtrl" class="list card" ng-repeat="video in myVideos">
<div class="item item-text-wrap">
<h2>{{video.snippet.title}}</h2>
<p>{{video.snippet.publishedAt | limitTo: 10}}</p>
</div>
<div class="item item-image">
<div class="embed-responsive embed-responsive-16by9"><youtube-video class="embed-responsive-item" video-id="video.id.videoId" player-vars="playerVars"></youtube-video></div>
</div>
<div class="item item-divider">
<button class="button button-outline button-block button-positive">
Share this Video
</button>
</div>
</div>
</ion-content>
When I do a search I can see that there are returned results and the $scope.myVideos variable is not empty. But its not getting binded with the list card. Please what am I doing wrong. Been on this for days. it works if I call the function directly without doing a search. Thanks
Every controller creates a new scope, so your search box and your video list are looking at different scopes. When you modify myVideos from the scope the search box is looking at, the changes won't be reflected in the scope that the AppCtrl is looking at.
Try moving ng-controller="AppCtrl" to the ion-content tag, then when you search returns, you can modify the correct scope and the changes should be reflected in the ionic list.