I have a countries list and I am populating those using ng-repeat, everything is working fine. Also, I am trying to show some other details inside each country by using the bootstrap popover and it doesn't seem to work so can someone please help me?
Html Code:
<body ng-app="app" ng-controller="my_controller">
<div class="span3 projectCard" ng-repeat="country in all_countries">
<div class="projectCardHeight">
<button class="btn close cardClose" ng-click="deleteCountry(country.id)">×</button>
<div class="cardHeader">Country</div>
<div class="cardBody">{{country.id}}</div>
<div class="cardBody">{{country.title}}</div>
<div class="cardBody">pop</div>
</div>
</div>
</body>
Javascript Code:
var app = angular.module("app", []);
app.controller('my_controller', function($scope) {
$scope.all_countries = [
{"id":28,"title":"Sweden"},
{"id":56,"title":"USA"},
{"id":89,"title":"England"}];
});
function deleteCountry(id)
{
alert("Do something");
}
$(document).ready(function () {
$("a[rel=popover]")
.popover({ placement: 'bottom', html: 'true' })
.click(function (e) {
e.preventDefault();
});
});
Please refer to this JsFiddle
Demo: http://jsfiddle.net/5ww8e/1/
Create a new directive called bs-popover and apply it together with ng-repeat. Trigger popover method inside bs-popover directive.
Also your js file loading order is wrong, you should load jquery before bootstrap.
Related
I have some data in the ng repeat, and inside that I have some data under each divs which is collapsed.
No when I click on the main div, I want only one div to collapse in at a time.
Eg: if I click abc, asdasd should be displayed.. Then if I click abc1, asdasd1 should be displayed but NOT asdasd
<script>
angular.module('myApp', [])
.controller("Ctrl_List", ["$scope", function(s) {
s.people = [
{name:"Sten", age:"49"}
,{name:"John", age:"39"}
,{name:"Hanne", age:"37"}
,{name:"Jens", age:"37"}
,{name:"Brian", age:"24"}
,{name:"Johnny", age:"24"}
,{name:"Peter", age:"49"}
]
s.obj = [
{
"name":'abc',
"text":'asdasd'
},
{
"name":'abc1',
"text":'asdasd1'
}
]
}])
html:
<body ng-app="myApp" ng-controller="Ctrl_List">
<div ng-repeat="ob in obj">
<button class="btn" data-toggle="collapse" href="#abc-{{ob.name}}"> {{ob.name}}</button>
<div id="abc-{{ob.name}}" class="collapse">{{ob.text}}</div>
</div>
</body>
data-parent is not working for me, or may be I am not using it properly.
Please Check the Fiddle here
Using a pure Angular approach rather than using JQuery for this.
Add a new property show to the each object and use ng-if to show/hide its corresponding text using a method in controller.
<div ng-repeat="ob in obj">
<button class="btn" ng-click=" showThis(ob)"> {{ob.name}}</button>
<div ng-if="ob.show">{{ob.text}}</div>
</div>
controller method
s.showThis = function(obj) {
//Hides all
angular.forEach(s.obj, function(ob) {
if(ob.name != obj.name) {
ob.show = false;
}
});
//Toggles current object show/hide
obj.show = !obj.show;
}
Working Fiddle
How to append choose images one by one to div tag using using ng-repeat when I click Add button after chosen file <input type="file"> in Angular JS. I have tried code below:
<body ng-app="myApp">
<div ng-controller="mainController">
<div>
<h3>Added Images: {{addedImages()}}</h3>
</div>
<div>
<input type="file" id="filename" ng-model="filename" name="">
<button ng-click="test()">Add Image</button>
<div class="shelfgallery"></div>
</div>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('mainController', function($scope) {
$scope.imageSources=[];
$scope.test = function(){
var url = ""//facing trouble in getting full URL of choosen image
alert(url);
$scope.imageSources.push({
imges: $scope.filename
});
var element = angular.element($('.shelfgallery'));
element.append('<img id="img_11" ng-repeat="imageSource in imageSources track by $index" ng-src="{{imageSource }}" /><br><br>');
//$compile(element)($scope);
};
$scope.addedImages = function(){
return $scope.imageSources.length;
}
});
</script>
</body>
If any wrong here let me know, or any other solution.
I have a bit of a complicated MVC project that we are adding some Angular capability to. I am very new to Angular and have watch three Angular courses on Pluralsight now. They have been very helpful but I am missing some piece of understanding.
I understand that I need to have just one ng-app (unless I want to bootstrap and I don't think I want to). So this app has defined my config and a custom directive. The custom directive is working nicely but when I click on a link in that directive it does not go anywhere....well perhaps it does but not where I am expecting. Fiddler shows nothing unusual like 404 or 500 errors.
(function ()
{
"use-strict";
angular.module("appMainNav", ["ngRoute"])
.config(function ($routeProvider) {
$routeProvider.when("/MySearch", {
controller: "routingController"
});
$routeProvider.otherwise({ redirectTo: "/" });
})
})();
My routingController:
(function () {
"use strict";
angular.module("appMainNav")
.controller("routingController", routingController);
function routingController($http) {
var vm = this;
alert("Routed");
}
})();
My HTML link as rendered:
Search
I don't get a page not found...the url just appends the #/MySearch. No console errors etc.
I was expecting to get a javascript alert...?
TIA
Edit
Should have added sooner. Here is markup:
_Layout page:
<body>
<div ng-app="appMainNav" ng-controller="routingController" class="container">
#RenderBody()
</div>
</body>
RenderBody is Index.cshtml:
<div class="row">
<div>
Header Stuff
</div>
</div>
<div class="row">
<div class="col-md-2">
<dashboard-main-nav></dashboard-main-nav>
</div>
<div class="col-md-3">
<div></div>
</div>
<div class="col-md-8">
<div></div>
</div>
</div>
<div class="row">
<div>
Footer Stuff
</div>
</div>
The custom directive angular code was left out of the snips above however that is where the link is generated.
You need to assign an event handler to a click event on the anchor tag:
Search
where foo is a function defined on the controller's scope:
function routingController($http, $scope) {
var vm = this;
$scope.foo = function(){
alert("I am so tired");
}
alert("Routed");
}
Try that and it should work.
Angular newbie here, running Angular 1.3 & ui-bootstrap 0.12. I'm just trying to learn Angular and ui-bootstrap and am unsure why the Angular Bootstrap collapse directive is not collapsing my div. Clicking on the buttons correctly toggles $scope.rightPanelCollapse yet the collapse is not happening.
Here's my markup:
<body ng-app="uxf.site">
<div class="container-fluid" data-ng-controller="UxfSiteController">
<button data-ng-click="toggleRightPanelCollapse()">{{rightPanelCollapse}}</button>
<button data-ng-click="toggleRightPanelCollapse()">{{rightPanelCollapse}}</button>
<div class="row">
<div id="left-panel" class="col-md-1 grid">
{{rightPanelCollapse}}
</div>
<div id="content" class="col-md-10 col grid">
{{rightPanelCollapse}}
</div>
<div id="right-panel" collapse="rightPanelCollapse">
{{rightPanelCollapse}}
</div>
</div>
</div>
Here's my JS:
(function(angular) {
'use strict';
angular.module('uxf.site', [])
.controller('UxfSiteController', ['$scope', function($scope) {
$scope.rightPanelCollapse = true;
$scope.toggleRightPanelCollapse = function() {
$scope.rightPanelCollapse = !$scope.rightPanelCollapse;
};
}]);
})(window.angular);
...newbie move. I just forget to add ui.bootstrap.collapse as a dependency in my uxf.site module. Problem solved.
I want to show following modal once user click the text. I don't know why it is not working.
<span ng-model="nonrelevantData" style="cursor: pointer;
text-decoration: underline;"><b>non-relevant data</b></span>
<script type="text/ng-template" id="bs-example-modal-sm">
<div class="modal-body">
...
</div>
<div class="modal-footer">
...
</div>
</script>
in js
$scope.$watch('nonrelevantData', function () {
$modal({
template: 'bs-example-modal-sm',
scope:$scope.$new()
});
}, true);
You can put your modal code in a scope function and call that function in ng-click
$scope.openModal = function(){
$modal({
template: 'bs-example-modal-sm',
scope:$scope.$new()
});
}
Markup
<div ng-click="openModal()">clik me to open</div>
I modified the plunkr of fancypants (from another question) to make a Simple Modal Example
To listen for clicks you don't need a watcher. The ngClick directive can be used for that.