I've just add angularJS to my project and I am now trying to add AngularUI to my project but it's not working correctly. The buttons don't look nice like they are supposed to. My webpage looks like http://postimg.org/image/mzgqlk7mr/
Here's my code:
<!DOCTYPE html>
<html ng-app>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="css/main.css" media="screen" />
<link href="menu_source/styles.css" rel="stylesheet" type="text/css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>
<div id='cssmenu'>
<!--
<div ng-controller="logOut">
<h4>Single toggle</h4>
<pre>{{singleModel}}</pre>
<button type="button" class="btn btn-primary" ng-model="singleModel" btn-checkbox btn-checkbox-true="1" btn-checkbox-false="0">
Single Toggle
</button>
-->
</div>
<div id="content">
Name:<input type="text" ng-model="name" /> {{name}}
</div>
<div id="content1">
<div ng-controller="ButtonsCtrl">
<h4>Single toggle</h4>
<pre>{{singleModel}}</pre>
<button type cv="button" class="btn btn-primary" ng-model="singleModel" btn-checkbox btn-checkbox-true="1" btn-checkbox-false="0">
Single Toggle
</button>
<h4>Checkbox</h4>
<pre>{{checkModel}}</pre>
<div class="btn-group">
<button type="button" class="btn btn-primary" ng-model="checkModel.left" btn-checkbox>Left</button>
<button type="button" class="btn btn-primary" ng-model="checkModel.middle" btn-checkbox>Middle</button>
<button type="button" class="btn btn-primary" ng-model="checkModel.right" btn-checkbox>Right</button>
</div>
<h4>Radio</h4>
<pre>{{radioModel}}</pre>
<div class="btn-group">
<button type="button" class="btn btn-primary" ng-model="radioModel" btn-radio="'Left'">Left</button>
<button type="button" class="btn btn-primary" ng-model="radioModel" btn-radio="'Middle'">Middle</button>
<button type="button" class="btn btn-primary" ng-model="radioModel" btn-radio="'Right'">Right</button>
</div>
</div>
<script src="angular.min.js"></script>
</body>
</html>
Here is a simple plunker forked from the AngularUI Bootstrap demo page (http://angular-ui.github.io/bootstrap/): http://plnkr.co/edit/frWpYAfC1TlZ13xNQzSV?p=preview
By comparing this plunker with your code you will notice that:
you are not including angular-ui/bootstrap JavaScript (!)
you need to add dependency on the ui.bootstrap module
On the other hand you are including Bootstrap's JavaScript which is totally unnecessary.
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
I have an Bootstrap Popup control in my application.I can not open "Model popup" when I click on button.Please check my below code and advise where it is problem.I have taken this example code from below link
https://getbootstrap.com/docs/4.0/components/modal/
render() {
return (
<form>
<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>
</form>
);
}
}
As per bootstrap link you have shared Bootstrap Modal has dependency on jQuery.
So, By adding the following below CDN links in your index.html it will start working.
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous"
/>
<script
src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"
></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"
></script>
Thanks.
This is my HTML code. I have a form and edit, view buttons. When I click the edit icon I want to show the update button, but when I click the view button I want to hide the update button using AngularJS
<div ng-app="myapp" ng-controller="candidatecontroller">
<div class="form-group">
<button class="btn btn-warning" ng-click="update_data()" value="{{btnName}}">
Update
</button>
<button class="btn btn-warning">
Close
</button>
</div>
<table>
<button class="btn btn-xs btn-success" ng-click="updateData(x.id,x.candidatename, x.degree, x.percentage, x.email, x.address,x.jobtype,x.salary);">
<i class="ace-icon fa fa-eye bigger-120"></i>
</button>
<button class="btn btn-xs btn-info" ng-click="updateData(x.id,x.candidatename, x.degree, x.percentage, x.email, x.address,x.jobtype,x.salary); ShowHide();">
<i class="ace-icon fa fa-pencil bigger-120 classs"></i>
</button>
</table>
</div>
Is this you are searching for?
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.2/angular.js"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://unpkg.com/ace-css/css/ace.min.css">
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<div ng-app="myapp" ng-controller="candidatecontroller">
<div class="form-group">
<button class="btn btn-warning" ng-click="update_data()" ng-show="updatebtn">Update</button>
<button class="btn btn-warning">Close</button>
</div>
<table>
<button class="btn btn-xs btn-success" ng-click="updateData(x.id,x.candidatename, x.degree, x.percentage, x.email, x.address,x.jobtype,x.salary); updatebtn = false;">
<i class="ace-icon fa fa-eye bigger-120"></i>
</button>
<button class="btn btn-xs btn-info" ng-click="updateData(x.id,x.candidatename, x.degree, x.percentage, x.email, x.address,x.jobtype,x.salary); updatebtn = true;">
<i class="ace-icon fa fa-pencil bigger-120 classs"></i>
</button>
</table>
</div>
<script>
angular.module('myapp', []).controller('candidatecontroller', ['$scope', function($scope) {
}])
</script>
</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>
I add angularjs and angularui to my project but it's appearing correctly. It looks like this http://postimg.org/image/vzq0uki3d/ . I don't understand why. My code is right and I'm pretty sure everything its set up correctly. The example.js file is in the root directory with the index.html file. Heres my code.
index.html
<!doctype html>
<html ng-app="plunker">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="ButtonsCtrl">
<h4>Single toggle</h4>
<pre>{{singleModel}}</pre>
<button type="button" class="btn btn-primary" ng-model="singleModel" btn-checkbox btn-checkbox-true="1" btn-checkbox-false="0">
Single Toggle
</button>
<h4>Checkbox</h4>
<pre>{{checkModel}}</pre>
<div class="btn-group">
<button type="button" class="btn btn-danger" ng-model="checkModel.left" btn-checkbox>Left</button>
<button type="button" class="btn btn-primary" ng-model="checkModel.middle" btn-checkbox>Middle</button>
<button type="button" class="btn btn-primary" ng-model="checkModel.right" btn-checkbox>Right</button>
</div>
<h4>Radio</h4>
<pre>{{radioModel}}</pre>
<div class="btn-group">
<button type="button" class="btn btn-primary" ng-model="radioModel" btn-radio="'Left'">Left</button>
<button type="button" class="btn btn-primary" ng-model="radioModel" btn-radio="'Middle'">Middle</button>
<button type="button" class="btn btn-primary" ng-model="radioModel" btn-radio="'Right'">Right</button>
</div>
</div>
<script src="angular.min.js"></script>
</body>
</html>
example.js
angular.module('plunker', ['ui.bootstrap']);
var ButtonsCtrl = function ($scope) {
$scope.singleModel = 1;
$scope.radioModel = 'Middle';
$scope.checkModel = {
left: false,
middle: true,
right: false
};
};
I'm not too familiar with AngularUI. However, I don't think you have the ButtonsCtrl defined properly. You don't use it as a vary. I think you need something like this:
angular.module('plunker', ['ui.bootstrap'])
.controller('ButtonsCtrl', [ '$scope', function($scope) {
$scope.singleModel = 1;
$scope.radioModel = 'Middle';
$scope.checkModel = {
left: false,
middle: true,
right: false
};
}]);
See comments about defining ButtonsCtrl in global namespace. Working example : http://cdpn.io/HDegL