I have this view, its loaded with ng-view in my index.html.
This is a snippet of the view:
<div class="window">
<div class="top">
<div class="windowTitle">
<i class="fa fa-list"></i>{{vm.workout.Name}}
//STACKOVERFLOW LOOK HERE
<div ng-click="vm.save()" id="btnSave" class="fa fa-floppy-o">123</div>
</div>
</div>
<div class="windowContent">
//STACKOVERFLOW LOOK HERE
<div ng-click="vm.save()" id="btnSave" class="fa fa-floppy-o"></div>
<div class="windowRow setList animatedList" ng-repeat="(index, set)
As you see, i have 2 buttons with ng-click="vm.save()"
The first one does not work, but it has been working for days.
Then i added the second one for testing, and it works, very wierd.
They both reside inside the same ng-view, which has the same controller assignted to them by the ng routing.
So im in the view, the right controller is active, but only one button is working, clues?
It was because i had an open angular expression in the same div.
<div class="window">
<div class="top">
<div class="windowTitle">
<i class="fa fa-list"></i> <span>{{vm.workout.Name}}</span>
//STACKOVERFLOW LOOK HERE
<div ng-click="vm.save()" id="btnSave" class="fa fa-floppy-o">123</div>
</div>
Works like a charm :)
Related
I am trying to use an ng-repeat inside a Semantic UI accordion. However, once I included ng-repeat inside the div tag with the accordion class, the accordion doesn't open nor close anymore. Clicking it doesn't do anything.
The accordion works properly here:
<div class="ui styled accordion">
<div class="title">
<i class="dropdown icon"></i> Filename
</div>
<div class="content">
<a>File Link</a>
</div>
</div>
The accordion breaks once I include ng-repeat:
<div ng-repeat="file in files" class="ui styled accordion">
<div class="title">
<i class="dropdown icon"></i> Filename
</div>
<div class="content">
<a>File Link</a>
</div>
</div>
I need to include the ng-repeat inside the accordion, and I need the accordion to do what it's supposed to do. Any help will be very much appreciated. Thank you!
<div class="ui styled accordion">
<div ng-repeat="file in files">
<div class="title">
...
ng-repeat and semantic ui needs to be separated
i'm using angular-gridster for designing dynamic user dashboard. how can we make gridster widget data content responsive while resizing widget callback, can any one suggest me how to make it responsive.
<div id="gridster" >
<div gridster="gridsterOpts">
<ul>
<li gridster-item="widget" ng-repeat="widget in DashboardControls">
<div class="box">
<div class="box-header">
<h3 style="width: 100%;word-break: break-all; table-layout: fixed;">{{widget.ControlobjectName}}</h3>
<div class="box-header-btns pull-right">
<a title="settings" data-toggle="modal" data-target="#widgetSettingModal" ng-click="openSettings(widget)"><i class="glyphicon glyphicon-cog"></i></a>
<a title="Remove widget" ng-click="remove(widget)"><i class="glyphicon glyphicon-trash"></i></a>
</div>
</div>
<div class="box-content">
<div>
<img class="img-responsive" ng-src="{{widget.ThumbnailPath}}" />
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
You'll have to create a custom directive that is embedded into the widgets (or multiple custom directives). This custom directive can contain logic that responds to the data and changes the content of the widgets.
I am trying to get a nice border around each of an array of uploaded images.
I have tried bootstrap panels and can get them working in Plunker.
However when I try to apply the same code in my angular app it doesn't work - no panel appears:
<div ng-repeat="f in files track by $index">
<div ng-show="f.type.indexOf('image') > -1">
<div class="panel panel-primary">
<img ngf-src="f" class="thumb">
<button class= "btn btn-warning btn-cancel" ng-disabled="!myForm.$valid"
ng-click="cancelPic($index)">Cancel</button>
<br><br>
<p>{{f.name}}</p>
<br>
<span class="progress" ng-show="f.progress >= 0">
<div style="width:{{f.progress}}%"
ng-bind="f.progress + '%'"></div>
</span>
</div>
</div>
</div>
I guess there is an obvious reason for this but I have no luck in finding it.
I am using angular 1.4.3 and bootstrap 3.3.1 same as the Plunk
I was missing the .panel-body class, like:
<div class="panel panel-default">
<div class="panel-body">A panel</div>
</div>
It is strange how I didn't need the .panel-body class in the Plunk but when I added it to the app it started working. C'est la vie.
I have json in my controller (will be moved) that is basically: id, questionName, answer.
I want to show each question in the code below. One question at a time. Upon clicking on the A links for yes/no I want the question to move on to the next.
I was hoping I could increment using "count" with an initial 0 which is the id relating to the json, and it would subsequently increase till the last question. This however doesn't seem to work; or at least my implementation doesn't.
I hope that's clear enough. It's hard to explain.
<div class="row" id="dropdown" ng-controller="testYourself">
<div id="q" class="cta1_content ugh" style="display:none;">
<div ng-repeat="data in quiz" ng-show="count==0" data-ng-init="count=0">
<h2 class="text-center">{{data.name}}</h2>
<div class="col-xs-6 col-md-3 col-md-offset-3 text-center yesno">
<a href="#" class="q" data-question="{{count}}" data-answer="1" ng-click="count=count+1">
<span class="cta_next"><i class="icon ion-checkmark-round"></i></span>
</a>
</div>
<div class="col-xs-6 col-md-3 text-center yesno">
<a href="#" class="q" data-question="{{count}}" data-answer="0" ng-click="count=count+1">
<span class="cta_next"><i class="icon ion-close-round"></i></span>
</a>
</div>
</div>
</div>
</div>
My controller looks like this:
app.controller('testYourself', ['$scope', function($scope) {
$scope.quiz = [
{id:0, name:"q1", answer: [{0: 'a', 1: 'b}], weight:25}
];
The id's are unnecessary to me, but added to try and do what I was trying. (I am 2 days new to Angular).
Thank you
UPDATE
------
<div id="q" class="cta1_content ugh" ng-controller="testYourself" data-ng-init="count=0">
<div ng-repeat="data in quiz" ng-show="data.id==count">
<h2 class="text-center">{{ data.name }} {{count}}</h2>
<div class="col-xs-6 col-md-3 col-md-offset-3 text-center yesno">
<a href="#" class="q" data-question="{{data.id}}" data-answer="1" ng-click="count=count+1">
<span class="cta_next"><i class="icon ion-checkmark-round"></i></span>
</a>
</div>
<div class="col-xs-6 col-md-3 text-center yesno">
<a href="#" class="q" data-question="{{data.id}}" data-answer="0" ng-click="count=count+1">
<span class="cta_next"><i class="icon ion-close-round"></i></span>
</a>
</div>
</div>
</div>
Well there are quit a number of things going on here.
Many syntax errors in your posted js code. So if that is pasted from your actual code, consider adding necessary braces, brackets, and quotes.
There is an inline style on #q. This means that none of the contents are visible. With angular, all you need is ng-show, and the library will take care of the rest. So get rid of that, and you should see question 1.
You probably want to put the ng-init on an element like #q. ng-repeat creates a new scope, so your count here is in the scope of the repeat rather than the scope of the controller (which is probably what you want).
Hope that helps.
Being new to Angularjs, I need a bit of help with this issue. I am attempting to add ng-click="getGallery(57)" to a modal tab. Adding via jQuery is not the issue, however I realize when I do this, Angular is not compiling the newly added ng-click. I have a simple controller
function imageGalleryCtrl ($scope, $http) {
//get gallery info on click
$scope.getGallery = function(id)
{
$http.post('/beta/images/get_images',{'id': id}).success(function(data)
{
$scope.images = data.thisGal_images;
$scope.images.galID = id;
});
};
}
I add the ng-click to the element with jQuery
//Edit image tab to use angularjs
$('#image_edit a').attr('ng-click','getGallery(' + settings.id + ')');
How do I force Angular to compile this newly added ng-click?
Thanks!
HTML Modal:
This is the modal that is called when the gallery name is clicked.
<div class="modal fade hide modal-creator" id="imageUploader" tabindex="-1" data-focus-on="input:first">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"></button>
<h3>Create New Gallery</h3>
</div>
<div class="modal-body">
<ul id="myTab" class="nav nav-tabs">
<li id="image_home" class="">
Home
</li>
<li id="image_upload" class="">
Upload Image Gallery
</li>
<li id="image_edit" class="">
Edit Image Gallery
</li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in" id="home">
<?php include('create.php'); ?>
</div>
<div class="tab-pane fade" id="upload">
<?php include('upload.php'); ?>
</div>
<div class="tab-pane fade" id="edit">
<div class="span9">
<ul id="imageSort" class="gallery-container">
<li ng-repeat="image in images">
<img ng-src="http://images.onlinealbumproofing.com/imageGallery/{{image.galleryID}}/{{image.imageName}}" alt="">
{{image.orgName}}
</li>
</ul>
</div><!-- /span9 -->
</div><!-- /row -->
</div>
</div>
</div><!-- /modal-body -->
<div class="modal-footer">
Close
Next
</div>
</div>
Update
So really attempting to do this the Angular way, and after some studies here is where I am at.
The controller is the same as above and I have updated the tabs on the modal as follows.
<div class="modal-body">
<ul id="myTab" class="nav nav-tabs">
<li id="image_home" class="">
Home
</li>
<li id="image_upload" class="">
Upload Image Gallery
</li>
<li id="image_edit" class="">
<a ng-click="getGallery(57)" href="#edit" data-toggle="tab">Edit Image Gallery</a>
</li>
</ul>
If I hard code the ng-click as above, the tab updates as expected. What I am trying to make happen, is when the modal is called, (#image_edit a) gets a defined ng-click="getGallery(id). I need to tell Angular to look at the ng-click again for the id.
Although I too think that you should try and find another approach, the answer to your question
How do I force Angular to compile this newly added ng-click?
is
// remove and reinsert the element to force angular
// to forget about the current element
$('#button1').replaceWith($('#button1'));
// change ng-click
$('#button1').attr('ng-click','exec2()');
// compile the element
$compile($('#button1'))($scope);
See this working example: http://plnkr.co/edit/SgvQzaY0TyFHD1Mf0c3F?p=preview
Basically what I'm getting at is you want to probably make this happen:
<ul id="imageSort" class="gallery-container">
<li ng-repeat="image in images">
<img
ng-src="http://images.onlinealbumproofing.com/imageGallery/{{image.galleryID}}/{{image.imageName}}"
alt=""
ng-click="getGallery(image.galleryID)"
>
{{image.orgName}}
</li>
</ul>
The problem is I'm unsure of the relationship between the settings.id and the galleryID for a particular image. If you can set up this relationship in the data so it just automatically binds you're in better shape.