This is boardview.html
<div ng-controller="BoardController">
<div class="panel panel-default">
<div class="panel-heading">
{{board.title}}
</div>
<div class="panel-heading">
{{board.writer}}
</div>
</div>
this is my partial appRoute.js
.when('/board/view/:id/:pg',{
templateUrl: 'templates/boardview.html',
controller: 'BoardController'
});
this is my partial BoardController
//view board
var view = function(pg){
Boards.view(CurrentBoardIdentifier, pg).success(function(response){
console.log("Request View Completed");
$scope.board = response;
console.log(response);
});
}
I didn't understand, why my html file can't access $scope.
I set the controller in html and in appRoute.js as well.
response in BoardController is single json file from express server.
please help me!
Related
im trying to create a delete button on one side of a word that i get from the data base and i cant figure out how to do it
I already delete the word but i have to use a input form on the html and i have to write by hand the word i that i want to delete, but this is no god for user experience, so thats why im seeking that X button
this is my html
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-body">
<h4 class="card-title">Hashtags</h4>
<h6 class="card-subtitle">Hashtags <code> uno</code> agregar.</h6>
<div class="row button-group">
<div class="col-lg-2 col-md-4" *ngFor="let hash of getHashtag">
<form [formGroup]="form" (ngSubmit)="onDelet(form.value)">
<button class="ti-close" type="submit"></button >
<input type="text" formControlName="hashtag" > {{hash}} <br>
<p id="competitors" > {{hash}}</p>
</form>
</div>
</div>
</div>
</div>
<div class="card">
this is my componet file:
public onDelet(){
this._getHashtag.deleteHashtag(this.form.value.hashtag).subscribe(
result =>{
// console.log(result)
this._getHashtag.getHashtag().subscribe(
resultado =>{
this.getHashtag = resultado
this.getHashtag = this.getHashtag.result
// console.log("Resultado", this.getHashtag)
},
error => {
var mensajeError = <any>error;
}
);
}
)
}
this is my service component:
deleteHashtag(hastagdel:string){
let header = new Headers({"Content-Type":"application/json"})
return this._http.post(this.url + "/removeHashtags" ,{hashtags:[hastagdel]}, {withCredentials:true})
}
I'm pretty sure you want to use http.delete, not http.post in your service.
http.post adds something to the db,
http.delete removes something,
http.put modifies something, and
http.get retrieves something from the db.
There are other http options, but those are the main ones.
I'm developing a website for our company, and one of the pages contains several tabs :
I want the loading operation to be done for each tab only once and not every time I click it, because these tabs have some API calls, and reloading takes time.
What is the best way to do it? I'm using Ui-router and ui-sref to move between each tab :
<div class="col-xs-2">
<div class="panel panel-default">
<div class="list-group panel panel-default">
<a ui-sref="dashboards.firstTab" ui-sref-active="active" class="list-group-item" id="firstTab_button">
<i style="color:darkblue" class="fa fa-area-chart"></i> TAB1 </a>
<a ui-sref="dashboards.secondTab" ui-sref-active="active" class="list-group-item" id="secondTab_button">
<i style="color:darkblue" class="fa fa-line-chart"></i> TAB2 </a>
<a ui-sref="dashboards.thirdTab" ui-sref-active="active" class="list-group-item" id="thirdTab_button">
<i style="color:darkblue" class="fa fa-server"></i> TAB3 </a>
</div>
</div>
</div>
<div ui-view class="col-xs-12">
<div class="row">
<div class="col-xs-12" ng-if="vm.isTabOneSelected">
<div ng-include src="'components/Cards/Tabs/TabOne/TabOne.html'"></div>
</div>
</div>
<div class="row">
<div class="col-xs-12" ng-if="vm.isTabTwoSelected">
<div ng-include src="'components/Cards/Tabs/TabTwo/TabTwo.html'"></div>
</div>
</div>
<div class="row">
<div class="col-xs-12" ng-if="vm.isTabThreeSelected">
<graph-panel panel-title="TabThree {{vm.isTabThreeSelected}}" chart-config="vm.charts.TabOneChartSite"></graph-panel>
</div>
</div>
</div>
On Each Controller, You can cache your loaded data in a service, and when you load your controller you will start by checking this service if it does not have the data, then you will request it from your APIs , in this case you only request your data once you access the tab for the first time :
eg. your service
app.service('dataService', function() {
this.firstTabData = null;
this.getFirstTabData = function () {
return this.firstTabData;
};
this.setFirstTabData = function (data) {
this.firstTabData = data;
};
});
your controller
app.controller('tabOne', function($scope, dataService) {
$scope.data = {};
$scope.load = function () {
if(dataService.getFirstTabData()) {
$scope.data = dataService.getFirstTabData();
}
else {
$scope.data = getDataFromAPI();
}
};
var getDataFromAPI = function () {
//get your data
dataService.setFirstTabData(dataFromAPI);
};
});
I cannot get the following code to run. I have tried many many things including: $locationprovider.html5mode(true) (and a element in the of my index.html.)
With this code I get /#!/index#%2Ffishes (with my base infront of it) in my URL. With html5mode I would get #fishes but the view would not change.
Plunkr:
http://plnkr.co/edit/a2lkCuxMf0ll9e9QAyiv?p=preview
Index:
<body ng-app="VissenApp">
<div class="AngularWrapper">
<div ng-view>
</div>
</div>
</body>
App.js:
var app = angular.module("VissenApp", ["ngRoute"]);
app.config(function($routeProvider,$locationProvider) {
$locationProvider.html5Mode(true);
$locationProvider.hashPrefix('!');
$routeProvider
.when("/index", {
templateUrl : "landing.html",
controller: "fishesController"
})
.when("/fishes", {
templateUrl : "fishes.html",
controller: "fishesController"
})
.otherwise({
templateUrl : "landing.html",
controller : "fishesController"
});
});
app.controller('fishesController', function($scope,$location) {
$scope.toFishes = function () {
$location.path("/fishes");
};
});
Fishes.html
<div class="container-fluid">
<div class="jumbotron">
gfhhgfh
</div>
</div>
Landing.html
<div class="container-fluid landing_background">
<div id="landing_logowrapper" >
<div ng-click="toFishes()" id="landing_logobackground" >
</div>
</div>
</div>
I am working on a project using MySQL, Angular, Express, and Node. I have a list of objects in a ng-repeat and when I click a specific item I would like to pass the clicked object to another page and show the object's properties through angular.
Here is the code:
HTML:
<div class = "panel panel-info" ng-repeat="job in job">
<div class = "panel-heading clickable">
<h1 class = "panel-title">{{job.title}}</h1>
<span class = "pull-right"><i class = "glyphicon glyphicon-minus"></i></span>
</div>
<div class = "panel-body">
<!--This will soon be the place where the Students information is placed by NodeJS-->
<!--<p style = "text-decoration: underline"> Job Title <p>-->
<p> {{job.description}} </p>
<p> {{job.first_name}} {{job.last_name}}</p>
<p> {{job.location}} </p>
<br>
<div class="form-group">
<div class=" col-sm-15">
<button onclick="location.href='jobPage.html';" type="submit" class="btn btn-default btn-block">Apply</button>
</div>
</div>
</div>
</div>
Controller:
soopControllers.controller("landingController",
function ($scope, $http){
$scope.formData = {};
$http.get('/api/jobLanding')
.success(function(data){
$scope.job = data;
console.log(data);
})
.error(function(data){
console.log('Error: ' + data);
});
//I want this function to get the job and send it to another page
$scope.getJob = function(){
$http.post('/api/job', $scope.formData)
.success(function(data){
$scope.formData = {};
$scope.users = data;
//$location.redirect();
console.log(data);
})
.error(function(data){
console.log('Error: ' + data);
});
};
});
AngularJS applications work the same way as regular web sites when it comes to navigation. The difference is that instead of sending a request to the server to go to the new URL, the router intercepts the location change, and goes to a route. The controller (or the resolve function) of that route then gets what it needs to display.
So, what you need in your ng-repeat instead of your button is
<a ng-href="#/job/{{ job.id }}">Apply</a>
And you then need a route mapped to the path /job/:jobId.
In the controller of this route, you'll then do something like
$http.get('/api/job/' + $routeParams.jobId).then(function(response) {
$scope.job = response.data;
});
How about using ng-click on the repeated element and extract that element in your display/routed page.
<div ng-controller="plandingController"
class = "panel panel-info"
ng-repeat="job in job"
ng-click="value.val=job">
....
</div>
In jobPage.html
<div ng-controller="plandingController" ng-repeat="pickedjob in value.val">
I want to use an Angular directive to wrap a Bootstrap panel. I'm running into a problem, though, if I want to use HTML tags within the body of the panel.
Given:
$scope.panel = {
title: "Title",
body: "This is some <strong>cool</strong> text!"
};
I would want my panel to render with a body that looks like:
This is some cool text!
But instead it's rendering as:
This is some <strong>cool</strong> text!
Is it possible to achieve the effect I'm looking for?
Edit:
Directive
aModule.directive('myPanel', function() {
return {
restrict: 'E',
scope: { panel: '=' },
templateUrl: './tmp/my-panel.html'
};
});
Template:
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">{{panel.title}}</h3>
</div>
<div class="panel-body">
<p>{{panel.body}}</p>
</div>
</div>
In use:
<my-panel panel="panel"></my-panel>
Using the answer below:
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">{{panel.title}}</h3>
</div>
<div class="panel-body">
<p ng-bind-html="panel.body"></p>
</div>
</div>
To bind HTML to an Angular variable, you have to use the $sce module's trustAsHtml function to verify the content.
$scope.panel = {
title: "Title",
body: $sce.trustAsHtml("This is some <strong>cool</strong> text!");
};
You also need to use ng-bind-html:
<p ng-bind-html="panel['body']"></p>
You no longer need the {{ panel.body }} since the ng-bind-html directive will evaluate the expression and insert the resulting HTML into the desired element in a secure way.