I have a simple table and every next row is added by clicking "Append" button.
I need to highlight matches between search input field with table input fields.
Trying to use highlight filter to achieve this, but it it runs with an error:
"TypeError: Cannot read property 'replace' of undefined"
How could I fix it? Example code below:
var app = angular.module("myApp",[]);
app.filter('highlight', function($sce) {
return function(text, phrase) {
if (phrase) text = text.replace(new RegExp('('+phrase+')', 'gi'),
'<span class="highlighted">$1</span>')
return $sce.trustAsHtml(text)
}
});
app.controller("myCtrl", ['$scope', 'highlightFilter', function($scope, highlightFilter){
$scope.arr = [];
$scope.append = function(){
var x = {};
x.data1 = "";
x.data2 = "";
$scope.arr.push(x);
};
}]);
<!DOCTYPE html>
<html>
<head>
<title>Author's List</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<style>
.highlighted { background: yellow }
</style>
</head>
<body ng-controller="myCtrl" ng-app="myApp">
<div class="container">
<div class="btn-group">
<button ng-click ="append()" type="button" class="btn btn-default">Append</button>
<input type="text" placeholder="Search" ng-model="search.text">
<ul>
<div ng-repeat="x in arr | filter:search.text" ng-bind-html="x.text | highlight:search.text"></div>
</ul>
</div>
<form name ="myForm" novalidate>
<table class="table table-bordered">
<tr>
<th>data1</th>
<th>data2</th>
</tr>
<tr ng-repeat="x in arr">
<td><input ng-model="x.data1" required type="text" class="form-control"></td>
<td><input ng-model="x.data2" required type="text" class="form-control"></td>
</tr>
</table>
</form>
</div>
</body>
</html>
The issue here is that your filter takes input text as first parameter, but you are passing a field that is not defined on your model: ng-bind-html="x.text | highlight:search.text". You have fields data1 and data2 but not text, that is why you are getting the mentioned error.
Your filter is actually working, but you have to pass a proper input parameter into it:
var app = angular.module("myApp",[]);
app.filter('highlight', function($sce) {
return function(text, phrase) {
if (phrase) text = text.replace(new RegExp('('+phrase+')', 'gi'),
'<span class="highlighted">$1</span>')
return $sce.trustAsHtml(text)
}
});
app.controller("myCtrl", ['$scope', 'highlightFilter', function($scope, highlightFilter){
$scope.arr = [];
$scope.append = function(){
var x = {};
x.data1 = "";
x.data2 = "";
$scope.arr.push(x);
};
}]);
<!DOCTYPE html>
<html>
<head>
<title>Author's List</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<style>
.highlighted { background: yellow }
</style>
</head>
<body ng-controller="myCtrl" ng-app="myApp">
<div class="container">
<div class="btn-group">
<button ng-click ="append()" type="button" class="btn btn-default">Append</button>
<input type="text" placeholder="Search" ng-model="search.text">
<br style="clear: both;"/>
<ul>
<li ng-repeat="x in arr | filter:search.text">
<span ng-bind-html="x.data1 | highlight:search.text"></span>
<span ng-bind-html="x.data2 | highlight:search.text"></span>
</li>
</ul>
</div>
<form name ="myForm" novalidate>
<table class="table table-bordered">
<tr>
<th>data1</th>
<th>data2</th>
</tr>
<tr ng-repeat="x in arr">
<td><input ng-model="x.data1" required type="text" class="form-control"></td>
<td><input ng-model="x.data2" required type="text" class="form-control"></td>
</tr>
</table>
</form>
</div>
</body>
Related
Since I am new to AngularJS I have come across an issue when it comes to presenting my database data which has been mapped using Rest and manipulated using JPA. So it is as ready as it can be. No need for further manipulation. Now using the $http.get I have been able to present the first table just calling the url but when it comes to getting data presented from a different table by sending a parameter something doens't work out.
In the module.js it looks like this
(function () {
'use strict';
angular.module('app',[]);
})();
The controller.js like this:
(function () {
'use strict';
angular
.module('app')
.controller('MyController', MyController);
MyController.$inject = ['$http'];
function MyController($http) {
var vm = this;
vm.players = [];
vm.historia = [];
vm.getAll = getAll;
vm.getHistory = getHistory;
init();
function init(){
getAll();
getHistory(name);
}
function getAll(){
var url = "/all/players";
var playersPromise = $http.get(url);
playersPromise.then(function(response){
vm.players = response.data;
});
}
function getHistory(name){
var url = "/all/allplayergames/" + name;
var historiaPromise = $http.get(url);
console.log([url]);
historiaPromise.then(function(response){
vm.historia = response.data;
console.log([response.data]);
});
}
}
})();
and last but not least html
<!DOCTYPE html>
<html lang="en"
xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://thymeleaf.org">
<head>
<meta charset="UTF-8"/>
<title>Game</title>
<link th:if="${mode=='development'}" rel="stylesheet" href="../static/bootstrap.css" th:href="#{/bootstrap.css}"/>
<link th:if="${mode=='production'}" rel="stylesheet" href="../static/bootstrap.min.css" th:href="#{/bootstrap.min.css}"/>
<script type="text/javascript" src="/static/angular.min.js" th:src="#{/angular.min.js}" ></script>
<script type="text/javascript" src="/static/app/app.module.js" th:src="#{/app/app.module.js}" ></script>
<script type="text/javascript" src="/static/app/yatzy.controller.js" th:src="#{/app/yatzy.controller.js}" ></script>
</head>
<body ng-app="app" >
<header>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Game Results</a>
</div>
</div>
</nav>
</header>
<div>
<div class="row">
<div class="col-lg-offset-2 col-lg-8">
<div ng-controller="MyController as vm">
<div class="btn-group" role="group">
<button ng-click="vm.getAll()" type="button" class="btn btn-default">Player Game History</button>
</div>
<table class="table">
<thead>
<tr>
<th>PlayerID</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="player in vm.players">
<td> {{player.playerid}}</td>
<td> {{player.name}}</td>
<td>
<button class="btn btn-danger" ng-click="vm.getHistory(player.name);
">View History</button>
</td>
</tr>
</tbody>
</table>
<table class="table">
<thead>
<tr>
<th>Score</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="p in vm.historia">
<td> {{p.score}}</td>
<td> {{p.player.name}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<footer class="footer" style="position: absolute; bottom: 0;background-color: #f5f5f5;" >
<div class="container">
<p th:text="${#dates.format(datetime,'dd MMM yyyy HH:mm')}" class="text-muted">Todays date: </p>
</div>
</footer>
</body>
</html>
And the console log does show the right player url when the "View History" is clicked, but it doesnt get the data from the table that is the score or the name.
I am new to AngularJS and need some help to solve an issue routing to another html page while passing a parameter. My application has a form with input fields (name & course). That information the user inputs will display in a table that is hidden unless it has data to display.
The issue is when clicking on the Display Info link, I am not being routed to the DisplayInfo.html page.
Here is the code: http://plnkr.co/edit/6WpZYkKMy0B4Vl8Phtnw?p=preview
app.js file
var app = angular.module('student', []);
app.controller('StudentController', function($scope) {
$scope.studentList = [];
$scope.addStudent = function() {
this.studentList.push({
name: $scope.getName,
course: $scope.getCourse,
date: new Date()
});
$scope.getName = "";
$scope.getCourse = "";
};
app.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/DisplayInfo/:name', {
templateUrl: 'DisplayInfo.html',
controller: 'DisplayInfoController'
});
}
]);
app.controller('DisplayInfoController', function($scope, $routeParams) {
$scope.name = $routeParams.getName;
});
});
Index.html
<!DOCTYPE html>
<html ng-app="student">
<head>
<link rel="stylesheet" type="text/css" href="student.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div id="header">
<h1>Student Access</h1>
<p>
<fieldset>
<br />
<br />
<form ng-controller="StudentController as studentCtrl" ng-submit="addStudent()">
<div ng-if="studentList.length > 0">
<table class="table table-striped">
<tr>
<th>
Name
</th>
<th>
Course
</th>
<th>
Date
</th>
</tr>
<tr ng-repeat="getStudent in studentList track by $index">
<td ng-bind="getStudent.name">
</td>
<td ng-bind="getStudent.course">
</td>
<td ng-bind="getStudent.date | date:'MM-dd-yyyy'">
</td>
<td>Display Info</td>
</tr>
</table>
</div>
<div ng-view></div>
<br />
<fieldset class="form-group">
<legend><strong>First Name</strong></legend>
<input ng-model="getName" type="text" class="form-control" title="Name" placeholder="Enter Student Name" />
</fieldset>
<fieldset class="form-group">
<legend><strong>Course</strong></legend>
<input ng-model="getCourse" type="text" class="form-control" title="Course" placeholder="Enter Course" />
</fieldset>
<input type="submit" class="btn btn-primary pull-right" value="Add Info" />
</form>
</fieldset>
</div>
</div>
<!-- AngularJS Library -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"> </script>
<script src="app.js"></script>
</body>
DisplayInfo.html
Name: {{getStudent.name}}
Here are the details for todo item: #{{getStudent}.
I think a / is missing in :
<td>Display Info</td>
It should be :
<td>Display Info</td>
Trying to learn AngularJS and a hole bunch of frameworks at the same time (doomed to go wrong).
I got this far, but have some issues with the bootstrap not working..
<!DOCTYPE html>
<html ng-app="">
<head>
<meta charset="utf-8" />
<title>Learning firebase and angularJS</title>
<script data-require="moment.js#*" data-semver="2.10.2" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.2/moment.min.js"></script>
<script data-require="chance#*" data-semver="0.5.3" src="http://chancejs.com/chance.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script src="https://cdn.firebase.com/js/client/2.4.1/firebase.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
</head>
<body style="margin:20px" ng-controller="employeeCtrl">
<div class="">
<button class="btn btn-default" ng-click="saveEmployee()">
Save
<span class="glyphicon glyphicons-ok"></span>
</button>
</div>
<div class="">
<table class="table">
<thead class="thead-inverse">
<tr>
<th>Datetime</th>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="label label-primary" id="datetime"></div>
</td>
<td>
<label>Employee Name</label>
<input type="text" ng-model="employeeName" />
</td>
<td>
<label>Employee Age</label>
<input type="number" ng-model="employeeAge" />
</td>
</tr>
</tbody>
</table>
<table class="table table-striped">
<thead>
<tr>
<th>Datetime</th>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody ng-repeat="employee in employees" ng-class-odd="oddRow">
<tr>
<td>{{employee.timestamp}}</td>
<td>{{employee.employeeName}}</td>
<td>{{employee.employeeAge}}</td>
</tr>
</tbody>
</table>
</div>
<script>
function employeeCtrl($scope) {
refresh = function() {
$scope.employeeName = new Chance().name();
$scope.employeeAge = new Chance().age();
}
$scope.employees = {};
refresh();
$scope.myData = new Firebase("https://hello-firebase-world.firebaseio.com/Employees");
$scope.saveEmployee = function() {
date = moment(new Date())
dateStr = date.format('YYYY.MM.DD') + " # " + date.format("LTS");
$scope.myData.push({employeeName: $scope.employeeName, employeeAge: $scope.employeeAge, timestamp: dateStr});
refresh();
};
$scope.myData.on('value', function(snapshot){
$scope.employees = snapshot.val();
$scope.$apply(); // temp. solution
});
};
</script>
<script>
var datetime = null, date = null;
moment.locale('da');
var update = function() {
date = moment(new Date())
dateStr = date.format('YYYY.MM.DD') + " # " + date.format("LTS");
datetime.html(dateStr);
};
$(document).ready(function() {
datetime = $('#datetime')
update();
setInterval(update, 1000);
});
</script>
</body>
</html>
http://plnkr.co/edit/MA52T3?p=preview
Now there should appear a striped table and a glyphicon at the save button.. But there is not.. Any help would be appreciated.
Bonus angular table row questions
I first tried to make the input part of the first row and the do a angular for-loop, but somehow this doesn't work..
<!DOCTYPE html>
<html ng-app="">
<head>
<meta charset="utf-8" />
<title>Learning firebase and angularJS</title>
<script data-require="moment.js#*" data-semver="2.10.2" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.2/moment.min.js"></script>
<script data-require="chance#*" data-semver="0.5.3" src="http://chancejs.com/chance.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script src="https://cdn.firebase.com/js/client/2.4.1/firebase.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
</head>
<body style="margin:20px" ng-controller="employeeCtrl">
<div class="">
<button class="btn btn-default" ng-click="saveEmployee()">
Save
<span class="glyphicon glyphicons-ok"></span>
</button>
</div>
<div class="">
<table class="table">
<thead class="thead-inverse">
<tr>
<th>Datetime</th>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="label label-primary" id="datetime"></div>
</td>
<td>
<label>Employee Name</label>
<input type="text" ng-model="employeeName" />
</td>
<td>
<label>Employee Age</label>
<input type="number" ng-model="employeeAge" />
</td>
</tr>
<span ng-repeat="employee in employees">
<tr>
<td>{{employee.timestamp}}</td>
<td>{{employee.employeeName}}</td>
<td>{{employee.employeeAge}}</td>
</tr>
</span>
</tbody>
</table>
</div>
<script>
function employeeCtrl($scope) {
refresh = function() {
$scope.employeeName = new Chance().name();
$scope.employeeAge = new Chance().age();
}
$scope.employees = {};
refresh();
$scope.myData = new Firebase("https://hello-firebase-world.firebaseio.com/Employees");
$scope.saveEmployee = function() {
date = moment(new Date())
dateStr = date.format('YYYY.MM.DD') + " # " + date.format("LTS");
$scope.myData.push({employeeName: $scope.employeeName, employeeAge: $scope.employeeAge, timestamp: dateStr});
refresh();
};
$scope.myData.on('value', function(snapshot){
$scope.employees = snapshot.val();
$scope.$apply(); // temp. solution
});
};
</script>
<script>
var datetime = null, date = null;
moment.locale('da');
var update = function() {
date = moment(new Date())
dateStr = date.format('YYYY.MM.DD') + " # " + date.format("LTS");
datetime.html(dateStr);
};
$(document).ready(function() {
datetime = $('#datetime')
update();
setInterval(update, 1000);
});
</script>
</body>
</html>
http://plnkr.co/edit/x6fSbG?p=info
There is a typo in the bootstrap-part. Change it to:
<span class="glyphicon glyphicon-ok"></span>
Bonus-question: Simply remove the wrapping <span>:
<tbody>
<tr>
<td>
<div class="label label-primary" id="datetime"></div>
</td>
<td>
<label>Employee Name</label>
<input type="text" ng-model="employeeName" />
</td>
<td>
<label>Employee Age</label>
<input type="number" ng-model="employeeAge" />
</td>
</tr>
<tr ng-repeat="employee in employees" >
<td>{{employee.timestamp}}</td>
<td>{{employee.employeeName}}</td>
<td>{{employee.employeeAge}}</td>
</tr>
</tbody>
The glyphicons-ok doesn't exist in your stylesheets, use glyphicon-ok instead.
For your striped table, you're generating all oddRows, shouldn't they be alternating with evenRows...
About button u have mistake there. Change:
<span class="glyphicon glyphicon-ok"></span>
About include angular. This example structure will work:
<!doctype html>
<html ng-app='project'>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<base href="/">
</head>
<body>
<ng-view></ng-view>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-resource.min.js"></script>
<script src="app.js" type="text/javascript"></script>
<script src="controllers/main_controller.js" type="text/javascript"></script>
</body>
</html>
I have following html file:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.5/angular.min.js"></script>
<script src="first.js"></script>
<link rel="stylesheet" href="list.css">
</head>
<body class="body" ng-app="myApp" ng-controller="FirstController as ctrl">
<div>
<input type="text" ng-model="inputText">
</div>
<first-tag></first-tag>
</body>
</html>
In this I have an element directive called first-tag.
Following is my js file:-
var app=angular.module('myApp',[]);
app.controller('FirstController',function($http){
var self=this;
$http.get("data.json").success(function(response){
self.data=response.records;
})
})
app.directive('firstTag',function(){
return{
restrict:'E',
replace:true,
templateUrl:'template.html',
controller:'FirstController',
controllerAs:'ctrl'
}
})
In my directive i have declared template.html as the templateURL. Can someone tell me why is following content not working properly in the code?
<table>
<div class="myClass" ng-repeat="message in ctrl.data | filter: inputText">
<tr>
<td><p>Name:{{message.modelName}}</p></td>
<td><p>Brand:{{message.modelBrand }}</p></td>
<td><img src="{{message.imageUrl}}" width="auto" height="auto"></td>
</tr>
</div>
</table>
Following seems to be working fine though:-
<div class="myClass" ng-repeat="message in ctrl.data | filter: inputText">
<p>Name:{{message.modelName}}</p>
<p>Brand:{{message.modelBrand }}</p>
<img src="{{message.imageUrl}}" width="auto" height="auto">
</div>
I want to print above contents in a table.
I think it should be:
<table>
<tr class="myClass" ng-repeat="message in ctrl.data | filter: inputText">
<td><p>Name:{{message.modelName}}</p></td>
<td><p>Brand:{{message.modelBrand }}</p></td>
<td><img ng-src="{{message.imageUrl}}" width="auto" height="auto"></td>
</tr>
</table>
I'm working on a test project with angular, but sudently it stopped working!
I don't changed anything in the project, but know if I enter on a list for e.g, where before I saw "description" now I see the tags {{obj.descrip}}!
It is happening with all my fields.
My browser console log doesn't show anything.
All my imports are correctly
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
My page
<%# page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%# taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%# page session="true"%>
<!doctype html>
<html data-ng-pp="caixaApp">
<head>
<title>Barattie ~ Soluções Integradas</title>
<link rel="icon"
href="https://bitbucket-assetroot.s3.amazonaws.com/c/photos/2015/May/27/3957014059-5-barattieproject-avatar.png">
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta name='robots' content='noindex,nofollow'/>
<script src="<c:url value='/resources/js/jquery-latest.min.js' />"></script>
<script src="<c:url value='/resources/js/angular.js' />"></script>
<script src="<c:url value='/resources/js/bootstrap.min.js' />"></script>
<script src="<c:url value='/resources/js/ui-bootstrap.min.js' />"></script>
<script src="<c:url value='/resources/js/CaixaController.js' />"></script>
</head>
<body data-ng-controller="caixaCtrl">
<%# include file="/resources/html/menu_inc.jsp"%>
<alert data-ng-repeat="alert in alerts" type="alert.type" close="fecharAlert($index)">{{alert.msg}}</alert>
<section>
<button data-ng-click="abrir()" class="btn btn-sm btn-primary pull-right">Novo Registro</button>
</section>
<br/>
<table data-ng-table="tabela" class="table table-hover">
<thead>
<tr>
<th>Descrição</th>
<th>Saldo</th>
<th>Opções</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="caixa in caixas | orderBy: ['ativo','descricao']">
<td>
<span>{{caixa.descricao}}</span>
</td>
<td>
<span>{{caixa.saldo | currency}}</span>
</td>
<td>
<button data-ng-disabled="!caixa.ativo" data-ng-click="abrir(caixa.id)" class="btn btn-primary btn-xs">Alterar</button>
<button data-ng-click="manter(caixa.id, !caixa.ativo)" class="btn btn-default btn-xs">{{caixa.ativo ? 'Desativar' : 'Ativar'}}</button>
</td>
</tr>
</tbody>
</table>
<script type="text/ng-template" id="add_modal">
<div class="modal-header">
<h3>Caixas</h3>
</div>
<div class="modal-body">
<!--<alert ng-repeat="alert in alerts" type="alert.type" close="closeAlert($index)">{{alert.msg}}</alert>-->
<form name="addForm" class="form-horizontal">
<input id="id" type="hidden" data-ng-model="caixa.id" />
<div class="control-group">
<label class="control-label" for="name">Descrição</label>
<div class="controls">
<input id="descricao" name="descricao" data-ng-model="caixa.descricao" type="text" placeholder="Ex. Caixa 01" class="input-xlarge" required="" ng-class="{error: caixa.descricao.$invalid && !caixa.descricao.$pristine}" required/>
</div>
</div>
<div class="control-group" ng-class="{error: caixa.saldo.$invalid && !caixa.saldo.$pristine}">
<label class="control-label" for="saldo">Saldo</label>
<div class="controls">
<input id="saldo" name="saldo" data-ng-model="caixa.saldo" type="text" placeholder="0.00" class="input-xlarge" required />
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button ng-click="salvar()" ng-disabled="caixa.$invalid" class="btn btn-success"><i class="icon-white icon-plus"></i> Salvar</button>
<button ng-click="cancelar()" class="btn">Cancelar</button>
</div>
</script>
</body>
</html>
Controller
var app = angular.module('caixaApp', ['ui.bootstrap']);
app.controller('caixaCtrl',[ '$scope', '$http', '$modal', function($scope, $http, $modal) {
$http.defaults.headers.post['Content-Type'] = 'application/json';
$scope.alerts = [];
var urlBase='/sistem/';
function lista() {
$http.get(urlBase + 'caixas/consultar').success(function(data) {
$scope.caixas = data;
});
}
//Carrega a lista geral assim que o documento é iniciado
lista();
//Fecha a mensagem de alerta
$scope.fecharAlert = function(index) {
$scope.alerts.splice(index, 1);
};
// Abre a modal
$scope.abrir = function(caixaId) {
var modalInstance = $modal.open({
templateUrl: 'add_modal',
controller: modalCtrl,
resolve: {
id: function() {
return caixaId;
}
}
});
modalInstance.result.then(function () {
//Atualiza a lista apenas no metodo .close() do modal.
lista();
$scope.alerts.splice(0, 1);
$scope.alerts.push({
type: 'success',
msg: "Registro salvo"
});
});
};
//controller da modal
function modalCtrl($scope, $modalInstance, id) {
$scope.alerts = [];
$scope.caixa = {};
//Carrega o objeto no modal se for alteracao
if (angular.isDefined(id))
$http.post(urlBase + 'caixas/alterar/'+id).success(function(data) {
$scope.caixa = data;
});
//fecha o modal
$scope.cancelar = function() {
$modalInstance.dismiss('cancel');
};
// mantem o usuario
$scope.salvar = function() {
$http.post(urlBase + 'caixas/adicionar', $scope.caixa).success(function(data) {
$modalInstance.close();
});
};
}
//Ativa / Desativa o material
$scope.manter = function manter(id, manter) {
$http.post(urlBase + 'caixas/manter/'+id+'&'+manter).success(function(data) {
$scope.caixas = data;
$scope.alerts.splice(0, 1);
$scope.alerts.push({
type: 'success',
msg: "Manutenção realizada"
});
});
};
}]);
Your scripts should be at the bottom of the page.
Please put the CaixaController.js at the bottom of the page, just before the body closing tag. Hope that would resolve the issue.
UPDATED:
Please correct data-ng-pp="caixaApp" to data-ng-app="caixaApp". 'a' is missing. Hope this resolves the issue :)