I'm new to angular. I've created a custom directive (templateUrl:modal-directive.html) with bootstrap modal in it. When I'm using the directive in Index page, modal is not popping up. However, when I'm running only modal-directive.html, the modal is popping up.
What am I doing wrong?
angular.module('mainApp', [])
.directive('modal-directive', function () {
return {
templateUrl: "modal-directive.html",
restrict: 'EA'
}
})
Index.html
<html ng-app="mainApp">
<head>
<title></title>
<meta charset="utf-8" />
<script src="script/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
Hello from Index
<div>
<modal-directive></modal-directive>
</div>
</body>
</html>
modal-directive.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="script/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<p>Hello from modal directive</p>
<form>
<button type="button" style="position:page" class="btn btn-primary" data-toggle="modal" data-target="#employeeSearchModal">
View Employee
</button>
</form>
<div id="employeeSearchModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"><b>Search Employee</b></h4>
</div>
<div class="modal-body">
<form class="form-inline">
<div class="form-group">
<input type="text" id="searchEmp" ng-model="searchEmpno" placeholder="Enter Employee id" class="form-control" />
<button data-dismiss="modal" class="btn btn-primary" data-toggle="modal" data-target="#employeeDetailsModal" ng-click="doSearch()">Search</button>
</div>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
Related
Angular.JS issue with ng-repeat value from inputs
I'm having an issue with ng-repeat, where I can't see to get the values from the input to show on the UI when submitted.
I'm very new to angular JS, hence why I'm trying to build a simple to do app to learn the basics.
On the newItem.html page, there is a form with a function Add(). There are two inputs for the project and the title. There is a button to add the new to do item.
Once the button is clicked and it runs the Add() function, it should add a new object to the toDoList array with the Project and the Task.
On the homePage.html I want to display a project title and the task details. Later down the line I want to generate the entire row on each click but for now I'm just trying to get the text to change.
I'm obviously missing something obvious here, I've read through the documentation for ng-repeat and ng-model, but just can't seem to grasp it.
index.html
<!DOCTYPE html>
<html lang="en" ng-app="ToDoListApp">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>To Do App</title>
<script src="angular/angular.min.js"></script>
<script src="angular-route/angular-route.min.js"></script>
<script src="app.module.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="app/assets/css/home.css">
<link href="https://fonts.googleapis.com/css?family=Acme&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/4c765e5630.js" crossorigin="anonymous"></script>
</head>
<body ng-view ng-controller="toDoCtrl">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous">
</script>
</body>
</html>
homePage.html
<div class="row header">
<div class="col-12">
<h1>DOINGO</h1>
<p>0 Open Tasks</p>
</div>
</div>
<div class="row toDoList">
<div class="row newItem">
<div class="col-2">
<button class="itemComplete btn"><i class="far fa-check-circle fa-2x"></i></button>
</div>
<div class="col-8">
<h4 ng-repeat="Project in ToDoList">{{ToDoList.Project}}</h4>
<p ng-repeat="Task in ToDoList">{{ToDoList.Task}}.</p>
</div>
<div class="col-2">
<button class="btn deleteItem"><i class="far fa-times-circle fa-2x"></i></button>
</div>
</div>
</div>
<div class="row addItemRow">
<div class="col-12 text-center">
<a href="#/newItem"><button type="button" class="btn btn addItem">
<i class="fas fa-plus-circle fa-3x"></i>
</button></a>
</div>
</div>
newItem.html
<div class="row header">
<div class="col-12">
<h1>DOINGO</h1>
</div>
</div>
<div class="row addNewItem">
<form ng-submit='Add()' class="form">
<div class="row projectInput text-center">
<div class="col-12">
<input type="text" ng-model="ToDoList.Project" placeholder="Enter a project title" ng-required>
</div>
</div>
<div class="row taskInput text-center">
<div class="col-12">
<input type="text" ng-model="ToDoList.Task" placeholder="Enter your task details" ng-required>
</div>
</div>
<div class="buttonRow row">
<div class="col-12 text-center">
<button type="submit" class="btn-lg btn-success addItemButton">Add</button>
</form>
<button class="btn-lg btn-danger cancelButton">Cancel</button>
</div>
</div>
</div>
app.module.js
var app = angular.module('ToDoListApp', ['ngRoute']);
app.config(function ($routeProvider, $locationProvider) {
$locationProvider.hashPrefix('');
$routeProvider
.when("/", {
templateUrl: "app/home/homePage.html",
controller: "toDoCtrl"
})
.when("/newItem", {
templateUrl: "app/newItem/newitem.html",
controller: "toDoCtrl"
})
.otherwise({
redirectTo: '/'
})
});
//main controller for app functionality
app.controller('toDoCtrl', function ($scope) {
$scope.ToDoList = []
//add the new to do item to the array
$scope.Add = function () {
$scope.ToDoList.push({
Project: $scope.Project,
Task: $scope.Task
});
$scope.Project = '';
$scope.Task = '';
};
});
What could be the possible reason behind the same? I am unable to resolve the issue. APIs are working well and just because of this error I am unable to integrate it with frontend.
here`s index.js file:
<html lang="en" ng-app="todoApp">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>::CRUD::</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script src="core.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body ng-controller="mainController">
<div class="container">
<div class="jumbotron text-center">
<h1>Todo CRUD App<span class="label label-info">{{ todos.length }}</span></h1>
</div>
<div id="todo-list" class="row">
<div class="col-sm-4">
<div class="checkbox" ng-repeat="todo in todos">
<label>
<input type="checkbox" ng-click="deleteTodo(todo._id)">{{todo.text}}
</label>
</div>
</div>
</div>
<div id="todo-form" class="row">
<div class="col-sm-8 text-center">
<form>
<div class="form-group">
<input type="text" class="form-control input-lg text-center" placeholder="Add a todo here" ng-model="formData.text">
</div>
<button type="submit" class="btn btn-primary btn-lg" ng-click="createTodo()">Add</button>
</form>
</div>
</div>
</div>
</body>
</html>
Thanks guys, Error is resolved. I just had to add type="javascript" in script tags.
I think you haven't specified your app in your file.
Like this..
<div ng-app="exampleApp">
You have only specified your controller.
I want to simply clear the fields on a form that exists in a bootstrap modal. I tried this solution by incorporating
<button type="reset" class="btn btn-danger">Reset</button>
but it didn't seem to do anything. Here is a plunkr with what I attempted:
Plunkr
Hey You can do it like with angular js.
Code on Plunker
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<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.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>
<div class="container" ng-app="app">
<h2>Modal Form Reset Example</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog" ng-controller="demoController">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Form</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" name="personForm" novalidate="">
<div class="form-group">
<label class="col-sm-2 control-label">Name</label>
<div class="col-sm-5">
<input class="form-control" type="text" placeholder="Name" ng-model="person.name" />
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="reset" ng-click="reset()" class="btn btn-danger">Reset</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<script>
var app = angular.module("app",[]);
app.controller("demoController",function($scope){
$scope.person = {};
$scope.reset = function(){
$scope.person = {};
};
});
</script>
</body>
</html>
I'm trying to do a simple project with KendoUi + AngularJs.
When I use the code below, it works fine:
<!DOCTYPE html>
<head>
<title>AngularJS</title>
<meta charset="utf-8">
<link href="Content/kendo/2014.2.716/kendo.common.min.css" rel="stylesheet" />
<link href="Content/kendo/2014.2.716/kendo.rtl.min.css" rel="stylesheet" />
<link href="Content/kendo/2014.2.716/kendo.default.min.css" rel="stylesheet" />
<script src="Scripts/kendo/2014.2.716/jquery.min.js"></script>
<script src="Scripts/kendo/2014.2.716/angular.min.js"></script>
<script src="Scripts/kendo.all.min.js"></script>
</head>
<body>
<a class="offline-button" href="../index.html">Back</a>
<div id="example" ng-app="KendoDemos">
<div class="demo-section k-content" ng-controller="MyCtrl">
<div class="box-col">
<h4>Set Value</h4>
<p>
<input kendo-numeric-text-box k-min="0" k-max="100" k-ng-model="value" />
</p>
</div>
<div class="box-col">
<h4>Set Value</h4>
<div kendo-slider k-min="0" k-max="100" k-ng-model="value"></div>
</div>
<div class="box-col">
<h4>Result</h4>
Value: {{value}}
</div>
</div>
</div>
<script>
angular.module("KendoDemos", ["kendo.directives"]);
function MyCtrl($scope) {
$scope.value = 50;
}
</script>
</body>
</html>
But, when I try to separate the angular code into a .js file, (like below), it doesn't work anymore:
<!DOCTYPE html>
<head>
<title>AngularJS</title>
<meta charset="utf-8">
<link href="Content/kendo/2014.2.716/kendo.common.min.css" rel="stylesheet" />
<link href="Content/kendo/2014.2.716/kendo.rtl.min.css" rel="stylesheet" />
<link href="Content/kendo/2014.2.716/kendo.default.min.css" rel="stylesheet" />
<script src="Scripts/kendo/2014.2.716/jquery.min.js"></script>
<script src="Scripts/kendo/2014.2.716/angular.min.js"></script>
<script src="Scripts/kendo.all.min.js"></script>
<script src="Scripts/app/itensApp.js"></script> <!--ADDED-->
</head>
<body>
<a class="offline-button" href="../index.html">Back</a>
<div id="example" ng-app="KendoDemos">
<div class="demo-section k-content" ng-controller="MyCtrl">
<div class="box-col">
<h4>Set Value</h4>
<p>
<input kendo-numeric-text-box k-min="0" k-max="100" k-ng-model="value" />
</p>
</div>
<div class="box-col">
<h4>Set Value</h4>
<div kendo-slider k-min="0" k-max="100" k-ng-model="value"></div>
</div>
<div class="box-col">
<h4>Result</h4>
Value: {{value}}
</div>
</div>
</div>
</body>
</html>
Scripts/itensApp.js
(function() {
var itensApp = angular.module('KendoDemos', ["kendo.directives"]);
}());
What I'm doing wrong?
Regards
It seems that you did not add the controller to your file.
Here's the code for the external .js file:
angular.module("MyApp", ["kendo.directives"]);
function MyCtrl($scope) {
$scope.value = 50;
}
Here's a working example:
http://plnkr.co/edit/3vRqvvvQZ8w6RRVohVdi?p=preview
I've been looking at this example and looking through google to no avail. I don't understand how popover-template works. Is it Angular's templating system? I couldn't find any documentation on this, so I thought I'll turn to the community. How can I similarly create my own template?
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script data-require="angular.js#1.1.5" data-semver="1.1.5" src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
<script data-require="angular.js#1.1.5" data-semver="1.1.5" src="bootstrap-ui.js"></script>
<link data-require="bootstrap-css#2.3.2" data-semver="2.3.2" rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" />
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="Ctrl">
<div style="padding-bottom: 400px"></div>
<div class="container-fluid">
<fieldset>
<div class="control-group">
<label class="control-label" for="tc">Sample:</label>
<div class="controls">
<div class="input-prepend">
<input placeholder="Enter end date.." type="text" class="input-small" ng-model="entity.endDate" name="endDate" />
<button type="button" class="btn" ng-model="$parent.entity.endDate" popover-template="datepicker-test.html">
<i class="icon-calendar"></i>
</button>
</div>
</div>
</div>
</fieldset>
</div>
</body>
</html>
It is a directive from angular-ui's bootstrap sub-project:
<button type="button" class="btn" ng-model="$parent.entity.endDate" popover-template="datepicker-test.html">
the corresponding Javascript is inbootstrap-ui.js:
.directive( 'popoverTemplate', [ '$tooltip', function ( $tooltip ) {
return $tooltip( 'popoverTemplate', 'popover', 'click' );
}]);
The project is here: https://github.com/angular-ui/bootstrap