I'm trying to build an app in angularJS and materializeCSS. The page loads, but I have a button that should open a pop-up form and although I tried several times, I can't figure out the problem :(
I've tried with <a href> but it's the same problem, I can't see any pop and as well, I don't see any errors in the console
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Products</title>
<link rel="stylesheet" href="libs/css/materialize.min.css" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
<style>
.width-30-pct{
width:30%;
}
.text-align-center{
text-align:center;
}
.margin-bottom-1em{
margin-bottom:1em;
}
</style>
</head>
<body>
<div class="container" ng-app="myApp" ng-controller="productsCtrl">
<div class="row">
<div class="col s12">
<h4>Products</h4>
<!-- used for searching the current list -->
<input type="text" ng-model="search" class="form-control" placeholder="Search product..."/>
<!-- table that shows product record list -->
<table class="hoverable bordered">
<thead>
<tr>
<th class="text-align-center">ID</th>
<th class="width-30-pct">Name</th>
<th class="width-30-pct">Description</th>
<th class="text-align-center">Price</th>
<th class="text-align-center">Action</th>
</tr>
</thead>
<tbody ng-init="getAll()">
<tr ng-repeat="d in names | filter:search">
<td class="text-align-center">{{ d.id }}</td>
<td>{{ d.name }}</td>
<td>{{ d.description }}</td>
<td class="text-align-center">{{ d.price }}</td>
<td>
<a ng-click="readOne(d.id)" class="waves-effect waves-light btn margin-bottom-1em"><i class="material-icons left">edit</i>Edit</a>
<a ng-click="deleteProduct(d.id)" class="waves-effect waves-light btn margin-bottom-1em"><i class="material-icons left">delete</i>Delete</a>
</td>
</tr>
</tbody>
</table>
<!-- floating button for creating product -->
<div class="fixed-action-btn" style="bottom:45px; right:24px;">
<!-- <a class="btn-floating btn-large waves-effect waves-light red" href="#modal1" ng-click="showCreateForm()"><i class="material-icons">add</i></a> */-->
<button data-target="modal1" class="btn-floating btn-large waves-effect waves-light red" ng-click="showCreateForm()">Add</button>
</div>
<!-- modal for for creating new product -->
<div id="modal1" class="modal">
<div class="modal-content">
<h4 id="modal-product-title">Create New Product</h4>
<div class="row">
<div class="input-field col s12">
<input ng-model="name" type="text" class="validate" id="form-name" placeholder="Type name here..." />
<label for="name">Name</label>
</div>
<div class="input-field col s12">
<textarea ng-model="description" type="text" class="validate materialize-textarea" placeholder="Type description here..."></textarea>
<label for="description">Description</label>
</div>
<div class="input-field col s12">
<input ng-model="price" type="text" class="validate" id="form-price" placeholder="Type price here..." />
<label for="price">Price</label>
</div>
<div class="input-field col s12">
<a id="btn-create-product" class="waves-effect waves-light btn margin-bottom-1em" ng-click="createProduct()"><i class="material-icons left">add</i>Create</a>
<a id="btn-update-product" class="waves-effect waves-light btn margin-bottom-1em" ng-click="updateProduct()"><i class="material-icons left">edit</i>Save Changes</a>
<a class="modal-action modal-close waves-effect waves-light btn margin-bottom-1em"><i class="material-icons left">close</i>Close</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/js/materialize.min.js"></script>
<!--angular -->
<script src="libs/js/angular.min.js"></script>
<script>
// angular js codes will be here
var app = angular.module('myApp', []);
app.controller('productsCtrl', function($scope, $http) {
$scope.showCreateForm = function(){
// clear form
$scope.clearForm();
// change modal title
$('#modal-product-title').text("Create New Product");
// hide update product button
$('#btn-update-product').hide();
// show create product button
$('#btn-create-product').show();
}
// clear variable / form values
$scope.clearForm = function(){
$scope.id = "";
$scope.name = "";
$scope.description = "";
$scope.price = "";
}
// create new product
$scope.createProduct = function(){
// fields in key-value pairs
$http.post('create_product.php', {
'name' : $scope.name,
'description' : $scope.description,
'price' : $scope.price
}
).success(function (data, status, headers, config) {
console.log(data);
// tell the user new product was created
Materialize.toast(data, 4000);
// close modal
$('#modal-product-form').closeModal();
// clear modal content
$scope.clearForm();
// refresh the list
$scope.getAll();
});
}
});
// jquery codes will be here
</script>
<script>
$(document).ready(function() {
// the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
$('.modal-trigger').leanModal();
});
</script>
</body>
</html>
In your showCreateForm function you need to add code to show the modal:
$scope.showCreateForm = function(){
// clear form
$scope.clearForm();
// change modal title
$('#modal-product-title').text("Create New Product");
// hide update product button
$('#btn-update-product').hide();
// show create product button
$('#btn-create-product').show();
// show modal
$('#modal1').show();
}
Here it is in Plunker with the above fix: https://plnkr.co/edit/sUb43sKyBGaIGpBXvcrP?p=preview