I am new in angularjs , i need to show a div having delete,rename and move buttons when is click an image(contained a ckeckbox) in a gallery.there are large number of image are present, i need to show the div atleast one checkbox is checked using angularjs.
try below code which should help you to solve your purpose:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-app>
<input type="checkbox" ng-click="isChecked = !isChecked;">Show Div</input>
<br>
<div style="width:200px;height:200px;" ng-show="isChecked">
Hello Div!!!
</div>
</body>
</html>
Related
all. have strange situation with IE, when element with mouse events within button - events will not trigger. this situation is not reproduce in Chrome or Firefox. unfortunately there is no info about this situation, perhaps someone was has same situation?
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body ng-app="">
<button>BUTTON
<div ng-mouseover="count = count + 1" ng-init="count=0">Mouse over me!</div>
</button>
<h1>{{count}}</h1>
<p>This example will increase the value of the variable "count" every time the mouse cursor moves over the DIV element.</p>
</body>
</html>
For whatever reason IE11 isn't seeing you as mousing over the child <div>, but instead it sees you mousing over the parent <button>.
This can be fixed by moving the ng-mouseover attribute to the <button> element.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body ng-app="">
<button ng-mouseover="count = count + 1" ng-init="count=0">
BUTTON
<div>Mouse over me!</div>
</button>
<h1>{{count}}</h1>
</body>
</html>
I have a form that contains different fields : input, select, select multiple, buttons. And I was wondering if it would be a good idea (and actually feasible) to create a component for this form, this component would be like a container that can contains all type of form fields (input, select, button, etc...).
I have put a sample of code on plunker, what I would like to do is to create a component for the form, in which I could insert how many other component I want (button, input, etc..).
<!DOCTYPE html>
<html ng-app="MyApp">
<head>
<link data-require="bootstrap-css#3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.6/angular.min.js"></script>
<script src="script.js"></script>
<script src="myInput.js"></script>
<script src="myButton.js"></script>
</head>
<body ng-controller="MyCtrl">
<div class="container">
<h2>My form</h2>
<form role="form">
<my-input label="Firstname"></my-input>
<my-input label="Lastname"></my-input>
<my-button label="Submit"></my-button>
</form>
</div>
</body>
</html>
If you are planning to reuse the form in other parts of your code, I would say it would be a good idea to create it as a component.
Otherwise, it's just a matter of preference. Sometimes it can be nice to divide large portions of code into different files.
Edit: Plunker example https://plnkr.co/edit/kyt9Q6L01r06dJXLDQZH?p=preview
<body ng-controller="MyCtrl">
<div class="container">
<my-form></my-form>
</div>
</body>
Edit 2: Updated the Plunker with an example of passing objects as attribute to the form
<body ng-controller="MyCtrl">
<div class="container">
<my-form inputlabels="inputs1"></my-form>
<my-form inputlabels="inputs2"></my-form>
</div>
</body>
If you mark "Yes" to these two questions then you should build a component:
Is it reusable?
Does the form has a unique logic?
I have a simple form.
<html lang="en" ng-app="MyApp">
<head>
</head>
<body ng-controller="AppCtrl">
<form name="myForm" id="myForm">
<input type="text" ng-model="field" name="myField" />
<div ng-show="myForm.myField.$error" style="color: red">
{{myForm.myField.$error}}
</div>
</form>
<script src="bower_components/angular/angular.js"></script>
<script src="controller.js"></script>
</body>
</html>
And i have angular controller
angular.module('MyApp',[])
.controller('AppCtrl', function($scope) {
$scope.myForm.myField.$error = "just to see it work";
});
Why do I get error '$scope.myForm is undefined'?
You have model, module and controller a little confused. My solutions uses Angular 1.2, although you will soon need to move to Angular 2.
Here is my reworking of your example:
<html lang="en" ng-app="MyApp">
<head>
</head>
<body ng-controller="AppCtrl as ctrl">
<form name="myForm" id="myForm">
<input type="text" ng-model="ctrl.myField" name="myField" />
<div style="color: red">
{{ctrl.myField}}
</div>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js">
</script>
<script src="controller.js"></script>
</body>
</html>
And in the controller.js:
angular.module('MyApp',[])
.controller('AppCtrl', [function() {
this.myField = "just to see it work";
}]);
In the above, I have put "myField" in the scope of the controller "AppCtrl". I have put the whole page under the control of the module 'MyApp'. You can either inject the model with "ng-bind" or use the curly bracket notation in the body of the div to bind to the "myField" model of "ctrl". I have used the latter but be aware this binding will be established after the page has been parsed.
If you load this all now, you should see "just see it work" in red under the text field, and also inside the text field. When you edit the text box, the red text will change in sync. Once you have that working, you will never want to stop learning more about Angular!
I should add that this model has a single attribute. To generalise this you will need to create a model with several properties (one for each input element), so that a JSON object is returned when the form is submitted.
You can't have dots in your variable name.
Try myFormMyFieldError instead of myForm.myField.$error.
Additional: Rather than using the attribute style, use a CSS file.
I am using Angular.js to change background of body on click of a button. All seems fine but still program not running.
HTML:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body data-ng-app="" data-ng-style="alpha">
<button data-ng-click="alpha={background:'red'}">Click Me</button>
</body>
</html>
Reference:
https://docs.angularjs.org/api/ng/directive/ngStyle
I think you have to try by removing "data-" from your attributes name as per jsfiddle
`http://jsfiddle.net/56512rmc/2`
Following is the code in angular js to show the array input value .but i want to show the array input value out of the angular js loop
<!DOCTYPE html>
<html>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<html ng-app="">
<body ng-init="names = ['Sam', 'Harry', 'Sally']">
<p>names: {{names}}</p>
<h3>Binding to each element directly:</h3>
<div ng-repeat="feature in names">
Value: {{feature}}
<input ng-model="feature">
</div>
</body>
</html>
</html>
I would create a controller for the view and in that:
#scope.names = ['Sam', 'Harry', 'Sally']
Then access each entry in the view with {{names[index]}}