I have used the following code in my workspace project as a part of a large application and ir worked fine. I am trying to isolate the page into a stand alone and cannot seem to get the dialog pop up. Shown below is the code, can someone please comment on why it won't pop up the modal dialog ? Thanks in advance and I appreciate your time.
<!doctype html>
<html lang="en" ng-app="app">
<head>
<link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js">
</script>
<script src="controllers.js"></script>
</head>
<body>
<div ng-controller="firstCtrl">
<div class="modal-header">
<button type="button" class="btn btn-primary"
data-toggle="modal" data-
target="#selectOptionTestDialog">Options</button>
</div>
<div class="modal fade" id="selectOptionTestDialog" tabindex="-1" role="dialog"
aria-labelledby="myCaseLabel"
aria-hidden="true" >
<div class="modal-dialog">
<div class="modal-content">
<form name="formShowOptions" role="form">
<div class="modal-header">
<p>Execution Steps</p>
</div>
<div class="modal-body">
Select Execution Step :
</div>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
Include JQuery and Bootstrap js files
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Related
I'm new to angular. I'm implementing modal but it's not showing ?
I tried using bootstrap but it's not working properly
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
I think you have not added bootstrap properly in your project. The HTML code you have shared looks ok to me.
If you can share some more detail/ code then I can help with what's going wrong.
Though I am sharing the ways to add bootstrap to your project, please try and let me know if that works.
(Method 1) — Adding Bootstrap to Angular Using angular.json
(Method 2) — Adding Bootstrap to Angular Using index.html
(Method 3) — Adding Bootstrap to Angular Using ng-bootstrap and ngx-bootstrap
Method-1:
run the following command-
npm install bootstrap --save
npm install jquery --save
angular.json
....
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"
]
.....
Method-2:
You can also include Bootstrap files from node_modules/bootstrap using the index.html file.
Run commands from method 1.
Then Index.html
<!doctype html><html lang="en">
<head>
<meta charset="utf-8">
<title>Angular Bootstrap 4 Examples</title> <base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.css">
</head>
<body>
<app-root></app-root>
<script src="../node_modules/jquery/dist/jquery.js"></script> <script src="../node_modules/bootstrap/dist/js/bootstrap.js"></script>
</body>
</html>
Method-3:
LINK: https://ng-bootstrap.github.io/#/home
ng add #ng-bootstrap/ng-bootstrap
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 = '';
};
});
I use AngularJS and I have the following template_
<div class="wrapper">
<div class="as-container">
<div ui-view="header"></div>
<div class="apoSoftContainer">
<div class="row clearfix">
<div class="col-md-12 column" ui-view="content"></div>
</div>
</div>
</div>
<div class="as-footer">
<div ui-view="footer"></div>
</div>
</div>
A span- Tag in my Footer looks like this:
</span> Version <span style="font-weight:normal;">Some Text</span></span>
There is no controller or service for the footer.
My aim is that when I click onto "Some Text" than a modal should be open but I don't know where to place the code?
If you already got the code to open a modal, I suggest you create a controller for it.
I usually wrap my entire application using a "mainController". That way, I can use it for head elements, footer, etc.
<!DOCTYPE html>
<html ng-app="WebApp" ng-controller="mainController as main">
<head>
<title>{{main.myTitle}}</title>
</head>
</body>
<footer>
<span ng-click="main.openModal()">Click here!</span>
</footer>
</body>
</html>
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>
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>