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.
Related
I am creating an app using Ionic Framework and I'm facing a problem.
I'd like to create a search function with tags. When we click on a button, the value is given to an input.
My code :
<div id="rech-btns" class="padding" ng-model="searchQuery" ng-controller="RechCtrl">
<button class="button button-outline button-balanced espace rech-text" ng-click="showDiv('Facile')">
Facile
</button>
<!-- There are others buttons but I deleted them for you to see the whole code -->
</div>
<div id="rechrech">
<label class="item item-input">
<i class="icon ion-search placeholder-icon"></i>
<!-- <input type="search" placeholder="Recherche..." /> -->
<input type="search" ng-model="searchQuery">
<!--<input type="text" text="facile" ng-model="searchQuery">-->
</label>
<div class="padding">
<button id="paramrech" class="button button-outline button-balanced espace rech-text">
<!-- the value arrives here -->
</button>
</div>
I tried to change the value with my function but it doesn't work so I'm asking you :p
My function :
.controller('RechCtrl', function($scope) {
$scope.showDiv = function(param) {
document.getElementById('rech-btns').style.display = "none";
//so when we click, this disappear
document.getElementById('rechrech').style.display = "block";
//this appear
document.getElementById("paramrech").innerHTML = param;
//and here I don't know what to do to change what I want
};
})
Do you have any idea ?
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'm trying to generate a list with these objects :
$scope.note.contentList = [{text: "hello", checked: false},{text: "hello 2", checked: false},...]
My view:
<label class="item item-input item-stacked-label" ng-hide="displayContentType()">
<span class="input-label"><b>Content</b></span>
<div class="row" ng-repeat="listItem in note.contentList">
<div class="col"><ion-checkbox ng-model="listItem.checked" ></ion-checkbox></div>
<div class="col col-80"><input type="text" ng-model="listItem.text"></input></div>
</div>
<div class="row" ng-click="addElementToContentList()">
<div class="col col-20"><i class="icon ion-plus-round" >Add Element</i></div>
</div>
</label>
The problem is when I try to click somewhere on this view. The first checkbox of the list, always changes its value.
For example, even when I click on the link "add element", the ng-click event doesn't work and the first checkbox is "checked".
Any idea? Thanks.
Just switch <label class="item... >..</label> by <div class="item...>..</div>. It Works better.
in the following code I have one drop-down list (serviceSmallId) for type of service.
It is populated using model info.
There is a second field check-box which should only be visible when drop-down has a selected value of 'Weekly'. I am trying to use ng-show/ hide of angular.
I tried to search for possible solutions but no luck.
Can anyone please guide me what I am doing wrong.
<section id="scrubber-view" class="mainbar" data-ng-controller="scrubber as vm">
<section class="matter">
<div class="container">
<div>
<button class="btn btn-info" ng-click="vm.goBack()"><i class="fa fa-arrow-left"></i>Back</button>
<button class="btn btn-info" ng-click="vm.cancel()" ng-disabled="!vm.canSave"><i class="fa fa-undo"></i>Cancel</button>
<button class="btn btn-info" ng-click="vm.save()" ng-disabled="!vm.canSave"><i class="fa fa-save"></i>Save</button>
<span ng-show="vm.hasChanges" style="color:orange" class="dissolve-animation ng-hide"><i class="fa fa-asterisk"></i></span>
</div>
<div class="row">
<div class="widget wblue">
<div data-cc-widget-header title="{{vm.title}}" subtitle="{{vm.scrubber.scrubberId}}"></div>
<form class="form-horizontal">
<div class="form-group">
<label for="serviceSmallId" class="col-sm-2">Service</label>
<div class="col-sm-4">
<select class="form-control" id="serviceSmallId" ng-model="vm.scrubber.serviceSmallId"
ng-options="item.dataLookupId as item.description for item in vm.serviceSmalls | orderBy:['sortOrder','description']">
</select>
</div>
</div>
<div class="form-group" ng-show="vm.scrubber.serviceSmallId.value=='Weekly'">
<input class="form-control" type="checkbox" id="fullyFlanged" value="Bar" />
</div>
</form>
</div>
</div>
</div>
</section>
</section>
There probably is a more elegant "angular way" solution,
but I updated you code to work here - http://jsbin.com/tupisoriho/1/edit?html,js,output
Explanation of changes
Provided ng-show a value vm.checker
added ng-change to the select element and gave it a function checkerGo which tested to see if dropdown == 'weekly', if yes change vm.checker
Update
there is a more "angular way" - using expressions!
As per #Omri Aharon fiddle/comment below.
You don't need to get the value property because a ng-model don't hold the element but the value itself;
<div class="form-group" ng-show="vm.scrubber.serviceSmallId.value=='Weekly'">
must be
<div class="form-group" ng-show="vm.scrubber.serviceSmallId == 'Weekly'">
EDIT: In your case vm.scrubber.serviceSmallId will contain the ID and not the description Weekly. I suggest you to use ng-change directive to call a function in your controller that will find the item based on ID and set in the controller to be visible for ng-show.
<select class="form-control" id="serviceSmallId" ng-model="vm.scrubber.serviceSmallId"
ng-options="item.dataLookupId as item.description for item in vm.serviceSmalls | orderBy:['sortOrder','description']"
ng-change="vm.selectObj()">
vm.selectObj() will find and set the current selected object in the scope to an controller variable (ex.: vm.selectedItem) and:
<div class="form-group" ng-show="vm.selectedItem.description=='Weekly'">
I have an ng-repeat with a button inside which calls a controller method.
I'm using the Ionic Framework which is based on AngularJS
I can't get the button to actually trigger the controller method unless I revert to using plain Angular (or one more variant, which I will show later).
My example of the broken situation can be seen here in jsfiddle.
You can see that the red button works (generates an alert) and the green, inside the ng-repeat doesn't, while it is calling the exact same controller function.
Here is the controller code:
angular.module('todoApp', [])
.controller('TodoController', ['$scope', function($scope) {
var answers = [];
addOptionToArray("Option 1");
addOptionToArray("Option 2");
addOptionToArray("Option 3");
$scope.answers = answers;
$scope.doSomething = function() {
alert("clicked");
};
function addOptionToArray(optionText) {
answers.push({text : optionText});
}
}]);
and the page layout:
<div ng-app="todoApp">
<div ng-controller="TodoController">
<button class="button button-assertive" ng-click="doSomething()">
<i class="icon ion-minus-circled"></i>
</button>
<label class="item item-input item-button-right" ng-repeat="answer in answers">
<input type="text" ng-model="answer.text">
<div class="buttons">
<button class="button button-balanced" ng-click="doSomething()">
<div>click</div>
</button>
</div>
</label>
</div>
</div>
Now there are two thins that will make the button inside the ng-repeat work again
Replace the Ionice bundle JS reference with a pure `AngularJS' one as can be seen here in jsfiddle
While keeping the Ionic JS reference, remove the <input>' inside the ng-repeat see jsfiddle
Any idea of why having the <input> inside the ng-repeat breaks the button's ng-click?
Or what is broken in Ionic?
Your problem is with block elements inside inline elements. Don't put <div> inside <button> or <label>. Fix it and it works as expected:
<div ng-app="todoApp">
<div ng-controller="TodoController">
<i class="icon ion-minus-circled"></i>
<div class="item item-input item-button-right" ng-repeat="answer in answers">
<input type="text" ng-model="answer.text" />
<div class="buttons">
Click
</div>
</div>
</div>
</div>