I have a div
<div class="error-text" ng-if="customerIdLength > customerIdMaxLength" ng-init="error='yes'" >Error presented</div>
here ng-if is working properly.
But
Based on ng-init value i am disabling a button like this:
<button class="btn btn-success" type="submit" ng-click="submitNumber();" ng-disabled="error=='yes'">Submit</button>
this is not working. If i am putting this ng-init to some other element which don't have ng-if then it is working properly. So what is the reason behind?
<!DOCTYPE html>
<html data-ng-app="myApp">
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
</head>
<body data-ng-controller="testController">
<div class="error-text" ng-init="$parent.error='yes'" ng-if="1 > 0">Error presented</div>
<button class="btn btn-success" type="submit" ng-click="submitNumber();" ng-disabled="error=='yes'">Submit</button>
<script>
// Code goes here
angular
.module('myApp', [])
.controller('testController', ['$scope',
function($scope) {
}
])
</script>
</body>
</html>
you need to use $parent to get inner scope inside ng-if.
The difference between ng-if and ng-show is that ng-if actually REMOVES the html element attached to it from the DOM, causing your ng-init expression not to be executed.
Simply replacing it by ng-show should do the trick
<div class="error-text" ng-show="customerIdLength" ng-init="error='yes'">Error presented</div>
I think the logic is sound but it might be missing some angularjs setup and configuration like ng-app and ng-controller declaration in the markup.
Ensure that this is declared at the top
<div ng-app="github" ng-controller="githubRepos">
<!-- Your code -->
</div>
Solution
Related
I am trying to create nested KendoGrid using Angular template but for some weird reason Child Grid is not getting created when used inside Angular Template
<script type="text/ng-template" id="my-tmpl">
<div k-detail-template>
<kendo-grid options="childOption"></kendo-grid>
</div>
</script>
<kendo-grid options="mainGridOptions">
<span ng-include="'my-tmpl'"></span>
</kendo-grid>
Here is the plunker for the same http://embed.plnkr.co/fLwZrSaNZwLn0RRYanOU/
I believe you can make it work if you include only the SUB GRID in the template and leave the k-detail-template directive in the main HTML like this:
<div id="example" ng-app="KendoDemos">
<div ng-controller="MyCtrl">
<script type="text/ng-template" id="my-tmpl">
<kendo-grid options="childOption"></kendo-grid>
</script>
<kendo-grid options="mainGridOptions">
<div k-detail-template>
<span ng-include="'my-tmpl'"></span>
</div>
</kendo-grid>
</div>
</div>
I tried in your plunker and it works.
Hope it helps (even though is somewhat late)
i have code like this
<div ng-app="">
<script type="text/ng-template" id="/tpl.html">
I am from a template.
</script>
<div ng-include="'/tpl.html'"></div>
</div>
<script> angular.module('a', []);</script>
<div ng-app="a">
<script type="text/ng-template" id="/tpla.html">
I am from a template a.
</script>
<div ng-include="'/tpla.html'"></div>
</div>
<script> angular.module('b', []).controller('myCtrl', function ($scope) {});</script>
<div ng-app="b" ng-controller="myCtrl">
<script type="text/ng-template" id="/tplb.html">
I am from a template b.
</script>
<div ng-include="'/tplb.html'"></div>
</div>
the output is :
I am from a template.
why when i use "ng-include" inside a module it doesn't work? do i missing anything?
Angular considers only the first found ng-app attribute when it bootstraps the application. The second one ng-app="a" is simply ignored.
If you want to have multiple Angular applications on the same page, you will need to bootstrap them manually (without using ngApp directive) using angular.bootstrap method.
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 have just created a very simple app.
It only contains one function which is used in ng-click.
Somehow, ng-click is not firing.
Can anyone take a look for me?
Plunker:
http://plnkr.co/edit/DxwX5sJVaKABeC2JBF8M?p=preview
HTML
var app = angular.module('myApp');
app.controller('createController', ['$scope', function($scope){
$scope.submitProject = function(){
alert('wahaha');
};
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<h1>Hello Plunker!</h1>
<div class="form-group text-right">
<button class="btn btn-primary btn-lg" ng-click="submitProject()">Submit</button>
</div>
</body>
</html>
Add an ng-controller, so ng-click will know which controller is the function.
<div class="form-group text-right" ng-controller="createController as create">
<button class="btn btn-primary btn-lg" ng-click="create.submitProject()">Submit</button>
</div>
I recommend using controllerAs, try reading about this in this article.
you need to bind your controller by adding an ng-controller attribute like
<body ng-controller="createController">
to an element that encompasses the html that you would like to bind the scope of your createController to.
Adding the controller to an outer Div will solve your problem.
<div ng-controller='createController' class="form-group text-right">
Hope it helps.
It looks like the module 'myApp' is not correctly instantiated. It should be:
var app = angular.module('myApp', []);
This is because you need to pass in an array which is the list of modules myApp depends on. In this case, it is an empty array.
You will also need to add the controller to the view as suggested by previous answers.
I have a simple app in which i have a single input element with a mylist model.
If mylist=1 i ng-include first.html and if mylist=2 i ng-include second.html. So far so good.
My problem is that in each html template i have a button that when clicked i want to change the value of mylist so i can navigate to the other and in order to achieve this i do:
<button ng-click="mylist=x" >switch to x</button>
but ng-click doesn't work. Why?
Here is my code:
scripts.js
var myApp = angular.module('myApp', []);
myApp.controller('MainController', function ($scope) {
$scope.mylist = 1;
});
index.html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="https://code.angularjs.org/1.2.16/angular.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="MainController">
<input type="number" ng-model="mylist" />{{mylist}}
<br/>
<div ng-switch on="mylist">
<div ng-switch-when=1>
<ng-include src="'first.html'"></ng-include>
</div>
<div ng-switch-when=2>
<ng-include src="'second.html'"></ng-include>
</div>
</div>
</body>
</html>
first.html
<p>first</p>
<button ng-click="mylist=2" >switch to 2</button>
second.html
<p>second</p>
<button ng-click="mylist=1">switch to 1</button>
Also here is the Plunker http://plnkr.co/edit/bVATLV66kN21LC8EPeoW
ng-include creates a child scope. So you should bind to an object property instead of a primitive.
$scope.my = {
list: 1
};
http://plnkr.co/edit/SbeGch5MJdux33HgYsEJ?p=preview