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.
Related
I have an angular 2 component for displaying a bootstrap 3 button group. The component can either have a label or it can stand alone.
My solution was to use two ng-contents controlled by an *ngIf however, it refuses to display either of the ng-contents and does not throw an error.
Here's btn-multi.html:
<div class="form-group"
*ngIf="label">
<label class="control-label col-lg-2 col-md-3">
{{ label }}
</label>
<div class="col-lg-10 col-md-9">
<div class="btn-group">
<ng-content></ng-content>
</div>
</div>
</div>
<div class="btn-group"
*ngIf="!label">
<ng-content></ng-content>
</div>
And here is how it is used:
<btn-multi label="Some Label"
[(value)]="someValue">
<btn [value]="true">Yes</btn>
<btn [value]="false">No</btn>
</btn-multi>
And this is it working with just the one ng-content:
I'm currently on angular 2 beta-15.
Thanks!
NgIf is getting in the way of including the content since ng-content is being rendered after NgIf is evaluated.
You need to take another approach on it, maybe something like this:
<div [ngClass]="{'form-group': label}">
<label *ngIf="label" class="control-label col-lg-2 col-md-3">
{{ label }}
</label>
<div [ngClass]="{'col-lg-10 col-md-9': label}">
<div class="btn-group">
<ng-content></ng-content>
</div>
</div>
</div>
And there are also even better ways to do it, it all depends on how you want this component to be consumed.
FYI, just did this on the fly so its not tested, but just to give you a general idea.
I am using bootstrap accordion in angular js. The panels are opening If I click on the heading directly but I need to add plus/minus symbols for each heading. Please help me out in achieving the functionality like If I click plus icon, panel should be open and If I click on minus symbol, the panel should be closed. Thanks in advance.
Sorry, I Cannot able to add fiddle or plunker as the data is coming from my local database.
<uib-accordion close-others="oneAtATime" class="accordion-data">
<uib-accordion-group heading="title from database" ng-repeat="values are coming from database">
<div class="row">
<div class="col-md-12">
<div class="row row-head">
<div class="col-md-6 col-xs-6">
</div>
</div>
<div class="row item-head accordion-content" ng-repeat="values are coming from database">
<div class="col-md-4 col-xs-4"><input type="checkbox" ng-model="check" >data from database
</div>
<div class="col-md-8 col-xs-8 service-data">
<div class="row">
<div class="col-md-2 col-xs-2"></div>
<div class="col-md-2 col-xs-2">
<input type="number" class="form-data" ng-disabled="!check">
</div>
<div class="col-md-2 col-xs-2">
<input type="number" name="times" class="form-data" ng-disabled="!check">
</div>
<div class="col-md-2 col-xs-2">
<input type="text" class="form-data" ng-disabled="!check" ng-readonly="true" >
</div>
<div class="col-md-2 col-xs-2">
<input type="text" class="form-data" ng-disabled="!check" ng-readonly="true" >
</div>
<div class="col-md-2 col-xs-2">
<input type="text" class="form-data" ng-disabled="!check" ng-readonly="true" >
</div>
</div>
</div>
</div>
</div>
</div>
</uib-accordion-group>
</uib-accordion>
I don't know the specifics about your implementation, but you could make use of the CSS :before pseudo-element like I have done in this simple fiddle.
If you have a way of selecting the accordion header by the open/closed state, then you can do something similar to this:
.accordion li.open:before {
content: '- ';
}
.accordion li.closed:before {
content: '+ ';
}
glyphicon glyphicon-plusIf you want to handle this in javascript, you could use the collapse event described here.
shown.bs.collapse will fire when a collapse element has been made visible to the user (will wait for CSS transitions to complete).
hidden.bs.collapse will fire when a collapse element has been hidden from the user (will wait for CSS transitions to complete).
$('#yourCollapseDiv').on('shown.bs.collapse', function () {
$(".glyphicon").removeClass("glyphicon glyphicon-minus").addClass("glyphicon glyphicon-plus");
});
$('#yourCollapseDiv').on('hidden.bs.collapse', function () {
$(".glyphicon").removeClass("glyphicon glyphicon-plus").addClass("glyphicon glyphicon-minus");
});
It uses glyphicons to display the + and -
I have code like this:
<div class="row"
ng-repeat="x in orders|orderBy:'order_id'| filter:{ paid: '0' } ">
<div class="col left">
<INPUT TYPE="CHECKBOX" NAME="processed" id="processed"
ng-true-value="'1'"
ng-false-value="'0'"
ng-model="x.processed"
ng-click="changeProcessedStatus(x.id, x.processed)">上菜/未上菜
<P>
</div>
<div class="col left">
<INPUT TYPE=CHECKBOX NAME="paid" id="paid"
ng-true-value="'1'"
ng-false-value="'0'"
ng-model="x.paid"
ng-click="changePaidStatus(x.id, x.paid)">付款/未付款
<P>
</div>
</div>
When I click checkbox "processed", it works fine (changeProcessedStatus function is called). But when I click checkbox "paid", since the record is defined to be filtered, changePaidStatus function is not called.(I don't know why) when I remove ng-repeat filter, changePaidStatus function is called normally.
How can I solve this problem? Thanks.
The order of execution of ng-click and ng-model is ambiguous. Instead you should use ng-change to ensure that you obtain the correct values of the model variable:
<div class="row"
ng-repeat="x in orders|orderBy:'order_id'| filter:{ paid: '0' } ">
<div class="col left">
<INPUT TYPE="CHECKBOX" NAME="processed" id="processed"
ng-true-value="'1'"
ng-false-value="'0'"
ng-model="x.processed"
ng-change="changeProcessedStatus(x.id, x.processed)">上菜/未上菜
<P>
</div>
<div class="col left">
<INPUT TYPE=CHECKBOX NAME="paid" id="paid"
ng-true-value="'1'"
ng-false-value="'0'"
ng-model="x.paid"
ng-change="changePaidStatus(x.id, x.paid)">付款/未付款
<P>
</div>
</div>
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.
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'">