I am new to Angular JS and I am using the 1.6 version of it.
I have this apptest.js script:
var myApp = angular.module("myApp", []);
(function(){
"use strict";
myApp.controller("productController", function($scope, $http)
{
$http.get('data/data.json').then(function(prd)
{
$scope.prd = prd.data;
});
});
});
And here my data/data.json data:
[
{
"id":"1",
"title":"20 Foot Equipment Trailer",
"description":"2013 rainbow trailer 20 feet x 82 inch deck area, two 5,000 lb axels, electric brakes, two pull out ramps, break away box, spare tire.",
"price":6000,
"posted":"2015-10-24",
"contact": {
"name":"John Doe",
"phone":"(555) 555-5555",
"email":"johndoe#gmail.com"
},
"categories":[
"Vehicles",
"Parts and Accessories"
],
"image": "http://www.louisianasportsman.com/classifieds/pics/p1358549934434943.jpg",
"views":213
}
]
Now here is my html page where I specified the ng-app and ng-controller:
<body ng-app="myApp" ng-controller="productController">
<div class="row">
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Add <span class="sr-only">(current)</span></li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="col-sm-4" ng-repeat="product in prd">
<div class="panel panel-primary">
<div class="panel-heading">{{product.title}}</div>
<div class="panel-body">
<img ng-src="{{product.image}}">
{{product.price | currency}}
{{product.description}}
</div>
<div class="panel-footer">a</div>
</div>
</div>
</div>
<script src="angular/angular.js"></script>
<script src="scripts/appTest.js"></script>
</body>
I am still getting the following error which is new for me:
angular.js:14239 Error: [$controller:ctrlreg] The controller with the
name 'productController' is not registered.
http://errors.angularjs.org/1.6.0-rc.0/$controller/ctrlreg?p0=productController
Any help is appreciated.
Its because of your Immediately Invoked Function Expression. you have to change it like below :
var myApp = angular.module("myApp", []);
(function(app){
"use strict";
app.controller("productController", function($scope, $http){
$http.get('data/data.json').then(function(prd){
$scope.prd = prd.data;
});
});
})(myApp);
Just import the file in index.html,
<script src=".../productController.js"></script>
In my case, it was missing reference in index page as well as my controller name was startupController (notice lower case s) and I was trying to register it with StartupController (upper case s)
In my case, with this same error, I failed to identify the app module in the ng-app directive like this:
<div class="row" ng-app>
In some circumstances I've seen where ng-app is by itself but I was forced to identify the app like:
<div class="row" ng-app="myApp">
In My case, I just copied a piece of code from an example, and it contained another ng-app and ng-controller in one of its <DIV>. The message was initially confusing, as the required controller had the name Ctrl
If you are reading this, check the name of the controller not found on your web browser console. Mine was Ctrl
So, I realized that my structure had another controller named like this one:
Bad Code
<html ng-app="sampleApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
</head>
<body ng-controller="SampleCtrl">
<h1>{{message}}</h1>
<!-- SEE THIS TABLE HAS A CONTROLLER WITH A VERY UNDEFINED NAME, SO IT MAKES IT DIFFICULT TO TRACK -->
<table ng-app="app" ng-controller="Ctrl" >
<td>
<div>Select an image file: <input type="file" id="fileInput" /></div>
<div class="cropArea">
<ui-cropper image="myImage" area-type="rectangle" aspect-ratio="1.7" result-image="myCroppedImage" result-image-size='{w: 340,h: 200}' init-max-area="true">
</ui-cropper>
</div>
</td>
<td>
<div>Cropped Image:</div>
<div><img ng-src="{{myCroppedImage}}" /></div>
</td>
</table>
</body>
<script>
var myApp = angular.module("sampleApp", []);
myApp.controller("SampleCtrl", function ($scope) {
$scope.message = "It Works!";
});
</script>
SOLUTION
After removing the controller and app definition not initially desired, it worked like a charm.
<html ng-app="sampleApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
</head>
<body ng-controller="SampleCtrl">
<h1>{{message}}</h1>
<!-- SEE THE NOW DOES NOT HAVE A CONTROLLER, THE CONTROLLER WILL BE MY DEFAULT APP CONTROLLER SampleCtrl -->
<table>
<td>
<div>Select an image file: <input type="file" id="fileInput" /></div>
<div class="cropArea">
<ui-cropper image="myImage" area-type="rectangle" aspect-ratio="1.7" result-image="myCroppedImage" result-image-size='{w: 340,h: 200}' init-max-area="true">
</ui-cropper>
</div>
</td>
<td>
<div>Cropped Image:</div>
<div><img ng-src="{{myCroppedImage}}" /></div>
</td>
</table>
</body>
<script>
var myApp = angular.module("sampleApp", []);
myApp.controller("SampleCtrl", function ($scope) {
$scope.message = "It Works!";
});
</script>
I have the same problem.
I solved the problem by puting the js code in the main js.
my html is a layer on the main html
my original html and js are following :
<div style="background: #f5f5f5;" ng-app='myapp' ng-controller="cIdentityCtrl as ctrl">
<form class="padding-md" name="staffForm" ng-submit="submit()">
<div class="row popup" style="padding-bottom: 10px;" ng-repeat="item in sfList">
<label style="width: 130px;text-align: right;"> {{item.branchName}}:</label>
<input type="text" style="width: 175px;display: inline-block;" class="form-control" ng-model="item.PERCENT"
placeholder="股份比例">%
</div>
<div class="clearfix"></div>
<div class="height50"></div>
<div class="text-center iframe-layer-btn">
<button type="submit" class="btn btn-success" ng-disabled="staffForm.$invalid">保存</button>
<button type="button" class="btn btn-default" ng-click="close()">关闭</button>
</div>
</form>
</div>
<script>
var myapp= angular.module('myapp',[]);
(function(myapp){
"use strict";
myapp.service('layerService', layerService)
.factory('instance', instance);
myapp.controller('cIdentityCtrl', function($scope, instance, layerService) {
console.log(instance.storeList)
$scope.sfList = angular.copy(instance.storeList);
$scope.submit = function(){
for(var i=0;i<$scope.sfList.length;i++){
if($scope.sfList[i].PERCENT!=null && $scope.sfList[i].PERCENT!=''){
if(!/^(((\d|[1-9]\d)(\.\d{1,2})?)|100|100.0|100.00)$/.test($scope.sfList[i].PERCENT)){
massage.error($scope.sfList[i].branchName+'门店设置有误:[0,100]保留二位小数');
return false;
}
}
}
instance.fnsf($scope.sfList);
layerService.close(instance.layero1);
}
$scope.close=function(){
layerService.close(instance.layero1);
}
});
})(myapp);
</script>
this html and js opened by ng-include ,but can not find the controller . and I put the js in the parent html`s js file and it worked well.
I had same issue and found the reason as...
The app module in the ng-app directive was defined/used at body-tag level like this
<body ng-app="intervalAngularExample">
and the $controller definition in productionController.js was imported in the html file at header level, certainly that should not work.
<head>
<script src=".../productController.js"></script>
</head>
<body ng-app="intervalAngularExample">
</body>
import should be then inside the body tag.
This error occurs when the $controller() service is called with a string that does not match any of the registered controllers. The controller service may have been invoked directly, or indirectly, for example through the ngController directive, or inside a component / directive / route definition (when using a string for the controller property). Third-party modules can also instantiate controllers with the $controller() service
Causes for this error can be:
1- Your reference to the controller has a typo. For example, in the ngController directive attribute, in a component definition's controller property, or in the call to $controller().
2- You have not registered the controller (neither via Module.controller nor $controllerProvider.register().
3- You have a typo in the registered controller name.
ref: https://docs.angularjs.org/error/$controller/ctrlreg?p0=GreetingController
Related
var aaa = angular.module("Module", [])
aaa.controller("Controller", function($scope, $filter, $timeout, $http, jsonFilter) {
$scope.SalaryData = [];
$scope.addSalaryField = function() {
$scope.SalaryData.push({});
}
$scope.first = function(abc) {
$scope.salry.abc = $scope.abc;
}
});
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body data-ng-app="Module" data-ng-controller="Controller">
<form role="form" id="SalaryInfoForm" name="SalaryInfoForm" autocomplete="off" enctype="multipart/form-data" novalidate="">
<div ng-repeat="salry in SalaryData">
<p>Salary Given</p>
<div class="tabbable-panel">
<div class="tabbable-line">
<ul class="nav nav-tabs ">
<li class="active">Yes </li>
<li>No </li>
</ul>
</div>
</div>
<input type="radio" name="abc" id="abc" ng-model="salry.abc" value="Yes">Yes
<input type="radio" name="abc" id="abc" ng-model="salry.abc" value="No">No
</div>
<a data-ng-click="addSalaryField()">SAVE & ADD MORE</a>
</form>
</body>
</html>
I am here repeating div using onclick addSalaryField() function. While clicking every iteration of first() function in tabpanel the value should be assign to radio ng-model. It's not working. Kindly help us.! we need to fetch value to ng-model on every iteration
I am new to angularJS, also in web development, so here is my problem: I tried to create a book store webpage, where the user utilizes a modal to input data, the problem is when, trying to create a controller for the modal, for the cancel button, it give me the error that you see in the title, that is:
"angular.js:14961 Error: [$injector:unpr]".
I search a lot, but I don't find any solution. I can open the modal.
note: I am not a native English speaker, I tried in the Spanish page, without luck. I hope you can help me.
The code:
my index.html
<!DOCTYPE>
<html >
<head>
<meta charset="UTF-8">
<title>Book Store</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body ng-app="app" ng-controller="myController as ctrl">
<h1>Welcome to book store</h1>
<table >
<tr>
<th>Titulo</th>
<th>Autor</th>
<th>Editorial</th>
<th>Edicion</th>
</tr>
<tr ng-repeat="x in listaLibros">
<td>{{x.name}}</td>
<td>{{x.autor}}</td>
<td>{{x.editorial}}</td>
<td>{{x.edition}}</td>
</tr>
</table>
<div class="form-group">
<button type="button" uib-tooltip="Click this button to do something amazing." class="btn btn-primary">Hover to show Tooltip</button>
</div>
<button type="button" class="btn btn-default" ng-click="control.open()">Open me!</button>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.10/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.3.3/ui-bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.3.3/ui-bootstrap-tpls.min.js"></script>
<script src= "app.js" ></script>
</html>
the agregarLibro.html
<html>
<body></body>
<div class="modal-content">
<div class="modal-header" ng-app="app">
<h4 class="modal-title">Agregar libro</h4>
<div class="modal-body">
<h6>Titulo</h6>
<input type="text" ng-model="listaLibros.name">
<h6>Autor</h6>
<input type="text" ng-model="listaLibros.autor">
<h6>Editorial</h6>
<input type="text" ng-model="listaLibros.editorial">
<h6>Edicion</h6>
<input type="text" ng-model="listaLibros.edition">
</div>
<button type="button" class="btn btn-danger" data-dismiss="modal" ng-click="$ctrl.cancel()">X</button>
<button type="button" class="btn btn-success">Agregar libro</button>
</div>
</body>
</html>
and the app.js
var app = angular.module("app", ['ui.bootstrap']);
app.controller("myController",function($scope, $http, $uibModal,){
var control = this;
$http.get("dataLibros.json")
.then(function(response){
$scope.listaLibros = response.data;
});
control.open = function(){
var modalInstance = $uibModal.open({
templateUrl: "agregarLibro.html",
controller: 'ModalInstanceCtrl',
controllerAs: '$ctrl',
})
}
});
app.controller('ModalInstanceCtrl', function ($uibModalInstance, items) {
var $ctrl = this;
$ctrl.cancel = function () {
$uibModalInstance.dismiss('cancel');
};
});
There are few mistakes,
(i) You need to embed the scripts within the body tag, not oustside the body tag
<div class="form-group">
<button type="button" uib-tooltip="Click this button to do something amazing." class="btn btn-primary">Hover to show Tooltip</button>
</div>
<button type="button" class="btn btn-default" ng-click="control.open()">Open me!</button>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.10/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.3.3/ui-bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.3.3/ui-bootstrap-tpls.min.js"></script>
<script src="app.js"></script>
</body>
(ii) You should use `ng-click="ctrl.open()"
<button type="button" class="btn btn-default" ng-click="ctrl.open()">Open me!</button>
(iIi)Remove ng-app from your modal, there can be only one ng-app in an application
<div class="modal-header" ng-app="app">
DEMO
I'm simply trying to display comments that users put within a comment box. However, I'm having issues because it's within an ng-repeat directive. Let me show so you can better understand visually:
<!DOCTYPE html>
<html lang="en" ng-app="MyApp">
<head>
<meta charset="UTF-8">
<title>Nuvi Interview Code Project</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="stylesheet.css">
</head>
<body ng-controller="HomeController">
<div class="container-fluid">
<h1>Nuvi Interview Code Project</h1>
<form class="form-inline well well-sm clearfix">
<span class="glyphicon glyphicon-search"></span>
<input type="text" placeholder="Search" class="form-control" ng-model="search">
</form>
<div class="row">
<div class="col-sm-6" ng-repeat="actor in data | filter:search">
<div class="well well-sm">
<div class="row">
<div class="col-md-6">
<img ng-src="{{actor.actor_avator}}" class="img-rounded img-responsive well-image pull-left">
<h3 class="name" data-toggle="modal" data-target="#actor-info" ng-click="changeActiveActor(actor)">{{actor.actor_name}}</h3>
<hr>
<p ng-repeat="say in activity_comments">{{say}}</p>
<div>{{actor.activity_comments}} Comments {{actor.activity_likes}} likes {{actor.activity_shares}} shares</div>
<br>
<input type="text" class="form-control" placeholder="Write a comment..." ng-model="comment">
<button class="btn btn-default" ng-click="postComment($index, comment)">Post Comment</button>
</div>
<div class="col-md-6">
<p class="pull-right"><strong>{{actor.provider}} </strong></p>
<p><strong>Post</strong></p>
<h5>{{actor.activity_message}}</h5>
<br><br><br><br><br>
<button ng-click="countUp($index)" type="button" class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-thumbs-up"></span> Like
</button>
<button ng-click="countDown($index)" type="button" class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-thumbs-down"></span> Unlike
</button>
</div>
</div>
</div>
</div>
</div>
<div class="modal" id="actor-info">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h2>{{activeActor.actor_name}}</h2>
</div>
<div class="modal-body">
<div class="row">
<div class="col-xs-8 col-xs-offset-2">
<img ng-src="{{activeActor.actor_avator}}" class="img-rounded img-responsive">
</div>
</div>
<div class="row top-buffer">
<div class="col-md-6">
<p>Message: {{activeActor.activity_message}}</p>
<p><strong>Username:</strong> {{activeActor.actor_username}}</p>
<p><strong>Date:</strong> {{activeActor.activity_date}}</p>
<p><strong>Comment:</strong> {{activeActor.activity_comments}}</p>
<p><strong>Likes:</strong> {{activeActor.activity_likes}}</p>
<p><strong>Sentiment:</strong> {{activeActor.activity_sentiment}}</p>
<p><strong>Shares:</strong> {{activeActor.activity_shares}}</p>
<p><strong>ID:</strong> {{activeActor.id}}</p>
<p><strong>Provider:</strong> {{activeActor.provider}}</p>
</div>
<div class="col-xs-12">
<p></p>
<button class="btn btn-danger pull-right" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- END OF MODAL -->
<hr>
<h6 class="pull-right">Coded by Saia Fonua</h6>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="app.js"></script>
</body>
</html>
Here is my app.js:
var app = angular.module("MyApp", []);
app.controller("HomeController", ["$scope", "$http", function($scope, $http) {
$scope.data = [];
$scope.search = "";
$scope.comment = "";
$scope.activeActor = {};
$scope.changeActiveActor = function(index) {
$scope.activeActor = index;
}
$scope.postComment = function(index, comment) {
console.log('comment ', comment);
//$scope.data[index].comments = [];
$scope.data[index].comments.push(comment);
console.log($scope.data[index]);
}
$scope.countUp = function(index) {
$scope.data[index].activity_likes++;
}
$scope.countDown = function(index) {
$scope.data[index].activity_likes--;
}
$http.get("https://nuvi-challenge.herokuapp.com/activities").then(function(response) {
console.log(response.data);
$scope.data = response.data;
})
}])
Can someone please help me to get the comments to display. When you start playing around with it, you'll see why it's harder than the problem sounds!
You have some problems with this line
<p ng-repeat="say in activity_comments">{{say}}</p>
As you are adding the comments to
$scope.data[index].comments.push(comment);
They would be reached by the actor.comments object
<p ng-repeat="say in actor.comments">{{say}}</p>
Here's the code snippet of the Angular js app.
var app = angular.module("list", []);
app.controller("myctrl", function($scope) {
$scope.get = function() {
$scope.thiss = false;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="list" ng-init="thiss = true">
<p ng-controller="myctrl">
<button ng-click="get()">Click</button>
<p ng-show="thiss">This is it</p>
</p>
</div>
i have been learning AngularJS. I cannot understand why this simple example fails to work. I have been followng w3cschools tutorial and the syntax seem to perfect align with it. Is it something to with scoping ? or do i have to bind ng-show with model data.
I also did the following but it doesnot seem to work.
<div ng-app="list" ng-init="thiss = true">
<p ng-controller="myctrl" >
<button ng-click="thiss=false">Click</button>
<p ng-show="thiss"> This is it</p>
</p>
</div>
Why is placing the controller on the div tag works ? But fails to work when it is in the child element?
It does not work because you have a <p> tag within a <p> tag. It should work if you change you code as follows.
<div ng-controller="myctrl" >
<button ng-click="thiss=false">Click</button>
<p ng-show="thiss"> This is it</p>
</div>
var app = angular.module("list", []);
app.controller("myctrl", function($scope) {
$scope.get = function() {
$scope.thiss = false;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="list" ng-init="thiss = true">
<div ng-controller="myctrl">
<button ng-click="get()">Click</button>
<p ng-show="thiss">This is it</p>
</div>
</div>
Check out Why <p> tag can't contain <div> tag inside it? for the reason why <p> cannot include block level elements
Please, don't try to make your HTML standard, follow some rule defined by HTML.
Don't put nested <p> tags. AngularJS sometimes don't work for invalid DOM. I used <span> tag instead of nested <p> works fine.
var app = angular.module("list", []);
app.controller("myctrl", function($scope) {
$scope.get = function() {
$scope.thiss = false;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="list" ng-init="thiss = true">
<p ng-controller="myctrl">
<button ng-click="get()">Click</button>
<span ng-show="thiss">This is it</span>
</p>
</div>
For more information validate HTML. Please, check following HTML code at: https://validator.w3.org/#validate_by_input
<!doctype html>
<html>
<head>
<title>Test</title>
</head>
<body>
<p>
<p>
</p>
</p>
</body>
</html>
Try this. I have just remove ng-controller from <p> and put it inside div with ng-app. don't know the reason behind this behavior of angularjs but it works as you want.
var app = angular.module("list", []);
app.controller("myctrl", function($scope) {
$scope.get = function() {
$scope.thiss = false;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="list" ng-init="thiss = true" ng-controller="myctrl">
<p>
<button ng-click="get()">Click</button>
<p ng-show="thiss">This is it</p>
</p>
</div>
Try following code.
var app=angular.module("list",[]);
app.controller("myctrl",function($scope){
$scope.get=function(){
$scope.thiss = false;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="list" ng-controller="myctrl">
<p ng-init="thiss=true">
<button ng-click="get()">Click</button>
{{thiss}}
<p ng-show="thiss">Show Content</p>
<p ng-show="!thiss">Hidden Content</p>
</p>
</div>
try after removing the blank array from the dependency
var app = angular.module('list');
make sure that the controller should be placed in <div ng-controller="myctrl">
Your code:
<p ng-controller="myctrl">
<button ng-click="get()">Click</button>
<p ng-show="thiss">This is it</p>
</p>
this is how a browser interprets html according to DOM :
<p ng-controller="myctrl">
<button ng-click="get()">Click</button>
</p>
<p ng-show="thiss">This is it</p>
<p></p>
therefore the scope of your controller "myctrl" does not apply on nested para,
try using div instead of nested <p>
var app = angular.module("list", []);
app.controller("myctrl", function($scope) {
$scope.get = function() {
$scope.thiss = false;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="list" ng-init="thiss = true">
<div ng-controller="myctrl">
<button ng-click="get()">Click</button>
<p ng-show="thiss">This is it</p>
</div>
</div>
So the title kinda says it all...
I want to use a materialize modal created by angular, only problem I got is it won't initialize correctly. Someone got a sollution?
The angular that gives me an object with values.
$http.get("../functions/getList.php")
.success(function (response) {
$scope.lists = response;
});
The HTML where I use the modal from materalizecss
<div id="modal1" class="modal">
<div class="modal-content">
<h4>Add Item to list: <!--list name hier--></h4>
<form>
<div class="row">
<div class="input-field col s12">
<label for="item-name">Item Name</label>
<input type="text" name="item-name" ng-model="itemName" id="item-name">
</div>
</div>
<div class="row">
<div class="input-field col s12">
<label for="item-description">Item Description</label>
<input type="text" name="item-description" ng-model="itemDescription" id="item-description">
</div>
</div>
</form>
</div>
<div class="modal-footer">
Add item
</div>
</div>
getList.php
$smt = $dbh->prepare("SELECT lists.name, lists.description, lists.deadline, lists.id FROM users INNER JOIN lists ON (users.id = lists.user_id) AND users.id = ?");
$smt->execute(array(
$user
));
$result = $smt->fetchAll(PDO::FETCH_ASSOC);
$json = json_encode($result);
print_r($json);
All you need to do is:
First:
Add this script to controller, to initialize materialize modal
$(document).ready(function(){
$('.modal').modal();
});
Example:
var myApp = angular.module('myApp',[]);
myApp.controller('TestController', ['$scope', function($scope) {
//initialize materialize modal
$(document).ready(function(){
$('.modal').modal();
});
}]);
Next: (Optional)
Use this line if you want to call the model programmatically
$('#modal1').modal('open'); //when you want to open modals programatically
Example:
$http.get("../functions/getList.php")
.success(function (response) {
$scope.lists = response;
$('#modal1').modal('open');
});
Next: (Optional)
Use "data-target" if you want to display modal on button click.. when using "ng-route" because href won't work because it will affect the ng-route and simply start redirecting pages
data-target="modal1" //instead of href="#modal1"
Example:
<button data-target="modal1" class="btn">Display My Modal</button>
Demo Here
var myApp = angular.module('myApp',[]);
var testController = function($scope, $http){
$(document).ready(function(){
$('.modal').modal();
});
$scope.clicked = function(){
$('#modal1').modal('open');
}
}
myApp.controller("testController",testController);
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script data-require="angular.js#~1.2.2" data-semver="1.2.28" src="https://code.angularjs.org/1.2.28/angular.js"></script>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.1/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.1/js/materialize.min.js"></script>
<div ng-app ng-controller="testController">
<button data-target="modal1" class="btn">Click Me</button>
<button ng-click="clicked()" class="btn">ng-Click</button>
<div id="modal1" class="modal">
<div class="modal-content">
<h4>My Modal</h4>
</div>
<div class="modal-footer">
<a class=" modal-action modal-close waves-effect waves-green btn-flat" ng-click="createItem()">close</a>
</div>
</div>
</div>