I have one table which will fill with the JSON data. After the filling table, If some one wants to modify any row then it will pop-up window, where you can modify.
What I am doing:
I made two controller, I want to pass the ng-model value from one controller to other controller which is controller for window.
Please tell me how to connect these two controller.
Please see the running example,
http://plnkr.co/edit/6lRT1B1sYcEx0lVCJiZZ?p=preview
index.html
<!DOCTYPE html>
<html>
<head>
<title>ToDo API Client Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.js"></script>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="navbar">
<div class="navbar-inner">
<a class="brand" href="#">ToDo API Client Demo</a>
</div>
</div>
<div ng-app="myApp" ng-controller="tasksCtrl">
<table class="table table-striped">
<tr><td style="width: 1px;"></td><td><b>Task</b></td><td><b>Options</b></td></tr>
<tr ng-repeat="task in tasks">
<td>{{task.title}}</td>
<td>{{task.description}}</td>
<td> <a class="btn" data-toggle="modal" data-target="#modal" ng-click="editTask(task)">Edit</a></td>
</tr>
</table>
</div>
<div id="modal" role="dialog" class="modal hide fade">
<div ng-controller="TaskController">
<div class="modal-header">
Task Dialog
</div>
<div class="modal-body">
<label for="txtName"></label>
<input type="text" ng-model="task.title" />
<input type="text" ng-model="task.description" />
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="saveTask()" data-dismiss="modal">OK</button>
</div>
</div>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('tasksCtrl', function($scope, $http) {
$http.get("data.json")
//$http.get("/todo/api/v1.0/tasks")
.success(function(response) {
console.log(response.tasks)
$scope.tasks = response.tasks;
});
});
app.controller('TaskController', function($scope, $rootScope){
$scope.editTask=function(task){
$rootScope.task=task;
}
});
</script>
</body>
</html>
First, place your ng-app="myApp" and ng-controller="tasksCtrl" to the body element.
E.g.
<body ng-app="myApp" ng-controller="tasksCtrl">
Then, move the
$scope.editTask=function(task) {
$scope.task = task;
};
To the tasksCtrl. The TaskController is no longer needed. You can remove it.
Since, it only use one controller you can use $scope instead of $rootScope.
Here's the Plunkr.
Hope it helps.
What you are trying to do would create a tight coupling between controllers but from what I see in the plunkr you would be better off with using angular-ui modal and just instantiate the modal window from code.
There are few mistakes that you did
First one that you modal html code is not inside ng-app
and you can use is Parent Child Concept of Angular ,In which you have no need to use $rootScope
Pluncker having complete solution of your problem:http://plnkr.co/edit/lRNJjM3aUIqQWFfE39yo?p=preview
Html:
<div ng-app="myApp" ng-controller="tasksCtrl">
<table class="table table-striped">
<tr><td style="width: 1px;"></td><td><b>Task</b></td><td><b>Options</b></td></tr>
<tr ng-repeat="task in tasks">
<td>{{task.title}}</td>
<td>{{task.description}}</td>
<td> <a class="btn" data-toggle="modal" data-target="#modal" ng-click="editTask(task)">Edit</a></td>
</tr>
</table>
<div id="modal" role="dialog" class="modal hide fade">
<div ng-controller="TaskController">
<div class="modal-header">
Task Dialog
</div>
<div class="modal-body">
<label for="txtName"></label>
<input type="text" ng-model="Edittask.title" />
<input type="text" ng-model="Edittask.description" />
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="saveTask()" data-dismiss="modal">OK</button>
</div>
</div>
</div>
</div>
Controller:
var app = angular.module('myApp', []);
app.controller('tasksCtrl', function($scope, $http) {
$http.get("data.json")
//$http.get("/todo/api/v1.0/tasks")
.success(function(response) {
console.log(response.tasks)
$scope.tasks = response.tasks;
});
$scope.editTask=function(task){
$scope.selectedTask=task;
}
});
app.controller('TaskController', function($scope, $rootScope){
$scope.Edittask={};
$scope.Edittask.title="";
$scope.Edittask.description="";
$scope.saveTask=function(){
console.log('called');
$scope.selectedTask.title=$scope.Edittask.title;
$scope.selectedTask.description=$scope.Edittask.description;
}
});
If you need to access any methods in other controller and pass the data you could do like this,
angular.element(document.getElementById('OtherControllersId')).scope().methodInOtherController(data);
Related
I am building a pagination table and i am using routeprovider. So the flow is on the homepage user is presented with a carousel when he clicks the text on carousel he is directed to a new html page called queryBoard, where there is a form to submit some details, it then fetches the data from back and displays in tabular format but when user is redirected to queryBoard page i keep getting error
Unknown provider: ngTableParamsProvider
I have included 'ngTable' in my module.
Main.js
angular.module('ui.bootstrap.demo', ['pageslide-directive', 'ngAnimate', 'ui.bootstrap', 'ngTable', 'ngRoute']);
index.html
<html ng-app="ui.bootstrap.demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-route.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.3.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://rawgit.com/esvit/ng-table/master/dist/ng-table.min.css">
<script src="https://rawgit.com/esvit/ng-table/master/dist/ng-table.min.js"></script>
<script src="resources/js/main.js"></script>
<script src="resources/js/CarouselController.js"></script>
<script src="resources/js/dashboardrouter.js"></script>
<script src="resources/js/TypeAheadController.js"></script>
<script src="resources/js/angular-pageslide-directive.js"></script>
</head>
<body>
<h2>AngularJS Sample Application</h2>
<div ng-view></div>
</body>
</html>
welcome.html [user is presented with carousel and on click he is routed to a new page]
<h1 class="text-center text-primary centered">Welcome to ananta-gs dashboard</h1>
<div>
<uib-carousel active="active" interval="myInterval" no-wrap="noWrapSlides" style="height: 305px; width: 450px; margin:auto">
<uib-slide ng-repeat="slide in slides track by slide.id" index="slide.id">
<img ng-src="/resources/images/cloud-home.jpg" style="height:305px; margin:auto;">
<div class="carousel-caption">
<a ng-click='sendEnvName(slide.text)'>
<h3 class="carousel-caption text-primary center-block">
{{slide.text}}</h3>
</a>
</div>
</uib-slide>
</uib-carousel>
There are exceptions during app initialization, click here to see details
</div>
Carousel.js [relevant part]
$scope.sendEnvName = function (gridName) {
alert(gridName)
$location.path("/queryBoard/"+gridName);
}
dashboardrouter.js
angular.module('ui.bootstrap.demo').config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/welcome', {
templateUrl: 'welcome.html',
controller: 'CarouselDemoCtrl'
}).
when('/queryBoard/:gridName', {
templateUrl: 'query/queryboard.html',
controller: 'documentNameTypeAheadController',
}).
otherwise({
redirectTo: '/welcome'
});
}]);
TypeAheadCOntroller.js
angular.module('ui.bootstrap.demo').controller('documentNameTypeAheadController', function ($scope, $http, $filter, ngTableParams,
$uibModal, $timeout, $log, $window,
$routeParams) {
alert($routeParams.gridName);
});
QueryBoard.html
<title>Query Board</title>
<script type="text/css">
.app-modal-window .modal-dialog {
width: 500px;
}
</script>
<body>
<script type="text/html">
<ul class="dropdown-menu" role="listbox">
<li ng-repeat="match in matches track by $index"/>
</ul>
</script>
<div class='container-fluid typeahead-demo' ng-controller="documentNameTypeAheadController">
<h1>Query Board</h1>
<form class="form-inline" role="form" ng-submit="submit()">
<div class="form-group">
<input type="text" placeholder="type-name" ng-model="selectedDocumentTypeName"
uib-typeahead="state for state in states | filter:$viewValue | limitTo:8"
class="form-control">
</div>
<div class="form-group col-md-offset-1">
<input type="text" placeholder="search criteria" class="form-control" ng-model="queryCriteria">
</div>
<button type="submit" class="btn btn-default col-md-offset-1">Submit</button>
<div>
<table ng-table="tableParams" show-filter="true" class="table">
<thead>
<tr>
<th ng-repeat="headerName in headerNames"
class="text-center sortable">
{{headerName}}
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="user in paginatedDetailedDataType">
<td ng-repeat="headerName in headerNames">
<div class="animate-switch" ng-if="headerName == spaceIdFieldName">
{{user[headerName]}} </div>
<div class="animate-switch" ng-if="headerName != spaceIdFieldName">{{user[headerName]}}</div>
</td>
<script type="text/ng-template" id="DetailedQueryView.html">
<div class="modal-header">
<h3>Detailed Query view for {{detailedTypeName}} spaceId {{detailedSpaceId}}</h3>
</div>
<div class="modal-body">
<table ng-table="tableParams" show-filter="true" class="table">
<thead>
<tr>
<th>Key</th>
<th>Value</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="property in detailedObjectProperties">
<td>{{ property.key }}</td>
<td>
<div ng-show="property.disabled">{{property.value}}</div>
<div ng-hide="property.disabled"><input type="text" ng-model="property.value"/>
</div>
</tr>
</table>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-hide="updateEnabled" ng-click="edit()">Edit</button>
<button class="btn btn-primary" ng-show="updateEnabled" ng-click="save()">Save</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
</script>
</tr>
</tbody>
</table>
</div>
</form>
</div>
</body>
I tried including the ngTable in TypeAheadController also but doesnot works, Can you please guide me where am i going wrong
how to use ngResource module
to send data to server.
and get data from server
i trying to send data to solr server
using angularjs api
and npm package manager to install package to my application
thank you for your help
controller.js:
var app=angular.module('myApp', ['ngResource']);
app.controller('Mycontroller',function($scope, $resource) {
$scope.requete = $resource('http://localhost:8983/solr/#/cv/:action',
{action:'cv.json', q:'angularjs', callback:'JSON_CALLBACK'},
{get:{method:'JSONP'}});
$scope.chercher = function () {
$scope.repnses = $scope.requete.get({q:$scope.formInfo.Quoi});
};
})
search.html :client
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body >
<div ui-view></div>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Formation</a>
<a class="navbar-brand" href="app/index.html">Formateur</a>
<a class="navbar-brand" href="app/search.html" active>Client</a>
</div>
</div>
</nav>
<div ng-contoller="Mycontroller">
<form class="form-horizontal" role="form">
<div class="table">
<table class="table table-striped">
<tr>
<td>
<label for="inputQuoi" class="col-sm-2 control-label">Quoi</label>
</td>
<td></td>
</tr>
<tr>
<td>
<input class="form-control" id="inputQuoi" placeholder="quoi" ng-model="formInfo.Quoi" required>
</td>
<td><button type="submit" ng-click="chercher()" class="btn btn-primary" >chercher</button></td>
</tr>
</table>
</div>
</form>
<table class="table table-striped">
<tr ng-repeat="repnse in reponses.results">
<td>{{requete.text}}</td>
</tr>
</table>
</div>
<script src="app/js/controller.js"></script>
<script src="node_modules/angular-resource/angular-resource.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</body>
</html>
Not sure if this is your problem.
But you have this...
<tr ng-repeat="repnse in reponses.results">
<td>{{requete.text}}</td>
</tr>
But dont really have any variable called reponses.results, or anything with requete as the variable.
Your code puts the get response in $scope.repnses
So to loop through that you need to refer to it properly.
<tr ng-repeat="repnse in repnses.results">
// Then refer to the variables inside of it using the repnse variable.
// not requet, dont even know where you're getting that from
<td>{{repnse.text}}</td>
</tr>
Here is my code , i take it from w3school.
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<script type="text/javascript" src="./angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName = "sparsh";
$scope.lastName = "khandelwal";
});
</script>
<title>Home Page</title>
</head>
<body>
<div ng-app="myApp" ng-init="name='Sparsh'">
<div ng-controller="myCtrl">{{firstName}}</div>
<p>
Name : <input type="text" ng-model="name">
</p>
<h1>Hello {{name}}</h1>
</div>
<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
<ul>
<li ng-repeat="x in names">{{x}}</li>
</ul>
</div>
</body>
</html>
ng-repeat in second block is not working.
here is the output i get on browser
Please help me out
Angular only bootstraps the first found application on the page, i.e. the first container with ng-app attribute. The second one you put, ng-app="" will be ignored. Although, you could manually bootstrap the second one with angular.bootstrap method, in your case it makes more sense to wrap entire body into the same app and remove the second ngApp directive:
<body ng-app="myApp">
<div ng-init="name='Sparsh'">
<div ng-controller="myCtrl">{{firstName}}</div>
<p>
Name :
<input type="text" ng-model="name" />
</p>
<h1>Hello {{name}}</h1>
</div>
<div ng-init="names=['Jani','Hege','Kai']">
<ul>
<li ng-repeat="x in names">{{x}}</li>
</ul>
</div>
</body>
Demo: http://plnkr.co/edit/UXTGEWOaRu82WpeOvuOz?p=preview
you can have only one ng-app in html page
so change your code as
<body ng-app="myApp">
<div ng-init="name='Sparsh'">
<div ng-controller="myCtrl">{{firstName}}</div>
<p>
Name :
<input type="text" ng-model="name" />
</p>
<h1>Hello {{name}}</h1>
</div>
<div ng-init="names=['Jani','Hege','Kai']">
<ul>
<li ng-repeat="x in names">{{x}}</li>
</ul>
</div>
</body>
The problem is, that only one ng-app can be automatically bootstrapped per webpage. So the second ng-repeat does not get parsed because it is not contained within an app.
You need to manually bootstrap your apps with angular.bootstrap()
https://docs.angularjs.org/api/ng/function/angular.bootstrap
This part of your code
<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
<ul>
<li ng-repeat="x in names">{{x}}</li>
</ul>
</div>
does not have an ng-app
ng-repeat only works within an ng-app
For some reason , I could not use ng-include in my main page..
Right now i need an alternative solution to ng-include as my product environment(Microsoft Excel Online is not initializing having ng-include on the main page).
Also, I dont want to use ng-view as i have to stick to single route.
FYI, My ng-include url will point to a html template containing its own controller and its scope variables.
Main Page.html
<body ng-app="myapp">
<div class="container-main" ng-controller="MainCtrl">
<div class="container-content">
<div ng-include="content.url"> </div>
</div>
</div>
</body>
controller.js
angular.module('myapp').controller('MainCtrl', function ($scope) {
$scope.content = { url : 'views/templates/mycontent.html'};
});
views/templates/mycontent.html:
<div class="flat-footer" ng-controller="FooterCtrl">
<div class="icon-home" ng-click="settings=false;help=false;gohome()">
</div>
<div class="icon-question" ng-click="settings=false;help=!help;showHelpPreview()" ng-init="help=false">
<div class="arrow-down" ng-show="help"/>
</div>
<div class="icon-cog" ng-init="settings=false" ng-click="settings=!settings;help=false" ng-show="isloggedIn">
<div class="arrow-down" ng-show="settings" />
</div>
<div class="settings-list" ng-show="settings">
<div class="pull-right icon-cancel-circle" ng-click="settings=!settings;help=false"/>
<button type="button" class="btn btn-primary logout" ng-click="settings=!settings;help=false;logout()">Logout</button>
</div>
<div class="help-option" ng-show="help">
<div class="pull-right icon-cancel-circle" ng-click="help=!help;settings=false"/>
<div>
<h1 class="title">//showHelpForUsecase.name//</h1>
<p class="title-description">//showHelpForUsecase.description// </p>
<dl>
<dt class="welcome-title"> //showHelpForUsecase.subtitle// </dt>
<dd class="welcome-definition"> //showHelpForUsecase.subdescription//</dd>
</dl>
</div>
<div class="footer-help-info">
<p class="more-info">More Info</p>
</div>
<div class="help-buttons-group">
<button type="button" class="btn btn-default help-go-back-btn" ng-click="help=!help;settings=false">Back</button>
</div>
</div>
</div>
I want to remove the ng-include in the main page and load the mycontent.html into "div.container-content" element on loading.
Note : Using bind-html-unsafe attribute instead of ng-include not compiling the html template and just binds the html content and resulting inner html content is not bound to its controller at all.
Please help me with a solution for this.
Regards,
Ram
bind-html-unsafe attribute is the possible workaround for ng-include.
Main Page.html
<body ng-app="myapp">
<div class="container-main" ng-controller="MainCtrl">
<div class="container-content">
<div bind-html-unsafe="content"> </div>
</div>
</div>
</body>
angular.module('myapp').controller('MainCtrl', function ($scope) {
$scope.content = { url : 'views/templates/mycontent.html'};
$http.get('views/templates/mycontent.html', {cache: $templateCache}).success(function(data) {
var newScope = $scope.$new();
$scope.content = $compile(data)(newScope);
});
});
I am using angularjs in my application. I have a problem with this code, this code generate data first time. But when I come back to that page from other location it give only expression written in jsp page
Below is my app.js
var app = angular.module("myModule",[]);
app.controller(
"ReportController",
function ($scope,$http) {
$http({
method: 'POST',
url: 'mypage_body.do',
data: 'action=fetchdata',
headers: {'Content-Type': 'application/x-www-form-urlencoded'}
})
.success(function(response) {
$scope.questions = response;
});
}
);
angular.element(document).ready(function (){
angular.bootstrap(document,['myModule']);
});
It gives expression when I reload the page from other location
like this
{{question.title}}
{{cell.f}}{{cell.f}}
{{row.h}} {{row.v}} {{row.v}}
I analyzed that page is not loading again. Means document.ready is not calling again on that page. Could anyone please help how to call again the module written in app.js without using document.ready.
Any help would be appreciated.
Thanks in advance.
<script type="text/javascript" src="/campustoolshighered/css/js/angular-1.2.26.min.js"></script>
<script type="text/javascript" src="/campustoolshighered/css/js/adhocreport/app.js"></script>
<script type="text/javascript" src="/campustoolshighered/css/uiframework/js/bootstrap.js"></script>
<div ng-controller="ReportController">
<div class="row" ng-repeat="question in questions">
<div class="col-md-12">
<div class="module">
<div class="heading">
<h2>{{question.title}}</h2>
<div class="module-options">
<span tabindex="3" class="icon-settings pop" title="Edit" data-toggle="tooltip" data-popoverid="#icon-setting"><span class="sr-only">Widget settings</span></span>
</div>
</div>
<div class="module-content" >
<div class="row">
<div class="col-md-12">
<div class="table-wrap">
<table class="table table-striped">
<thead>
<tr>
<th scope="col" role="columnheader" ng-repeat="header in question.dataTable.cols" >{{header.label}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in question.dataTable.rows">
<td ng-repeat="cell in row.cells"><a ng-if="cell.link" href="{{cell.link}}" tabindex="3">{{cell.f}}</a><span ng-if="!cell.link">{{cell.f}}</span></td>
</tr>
</tbody>
</table>
</div>
<ul ng-show="question.aggregateTable">
<li ng-repeat="row in question.aggregateTable.rows">
<strong>{{row.h}} </strong>
<a ng-if="row.link" href="{{row.link}}" tabindex="3">{{row.v}}</a>
<span ng-if="!row.link">{{row.v}}</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
And if I do not bootstrap my code manually on document.ready page does not load angular js not even first time.