The button is not work.
I click the button ng-click="goSearchTitle()" and it has no response.
Why it doesn't work?
<body ng-app="myapp">
<div ng-contoller="searchbyTitle">
<h3>Search by Title</h3>
<div>
<input type="text" id="searchTitle" placeholder="Enter a title" ng-model="searchTitle"/>
<button type="button" id="goSearchTitle" ng-click="goSearchTitle()">Search</button>
</div>
</div>
<script>
angular.module("myapp", []).controller("searchbyTitle", function($scope, $http) {
$scope.goSearchTitle = function(){
alert($scope.searchTitle);
}
});
</script>
</body>
Your app name is wrong.
<body ng-app="myapp">
Otherwise, angular will give an injector module error. You should always open console and see the errors to understand better
You have typo # ng-contoller, it is ng-controller
var myApp = angular.module("myapp", []);
myApp.controller("searchbyTitle", function($scope, $http) {
$scope.goSearchTitle = function() {
alert($scope.searchTitle);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myapp">
<div ng-controller="searchbyTitle">
<h3>Search by Title</h3>
<div>
<input type="text" id="searchTitle" placeholder="Enter a title" ng-model="searchTitle" />
<button type="button" id="goSearchTitle" ng-click="goSearchTitle()">Search</button>
</div>
</div>
</body>
Related
i've been stuck here for a while, when i'm using "form" tag everything is ok but in "div" tag ...
main.js:
var app = angular.module('demo', []);
app.controller('appctrl', function ($scope) {
$scope.start = function (name) {
console.log(name);}
}
index.html:
<!DOCTYPE html>
<html ng-app="demo">
<head>
<script src="js/angular.min.js"></script>
<script src="js/main.js"></script>
</head>
<body>
<div id="container" ng-controller="appctrl">
<input id="input" autocorrect="off" spellcheck="false" autocapitalize="off" autofocus="true" placeholder="Please enter your full name" type="text" ng-model="name">
<div id="button" ng-click="show()">Start Demo</div>
</div>
</body>
</html>
I think you need this, you need to name the function as show , also you need to pass parameter to the function show.
additionaly you are missing ) in your controller.
app.controller('appctrl', function ($scope) {
$scope.show = function (name) {
console.log(name);}
}
DEMO
var app = angular.module('demo', []);
app.controller('appctrl', function ($scope) {
$scope.start = function (name) {
console.log(name);
}
});
<!DOCTYPE html>
<html ng-app="demo">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
</head>
<body>
<div id="container" ng-controller="appctrl">
<input id="input" autocorrect="off" spellcheck="false" autocapitalize="off" autofocus="true" placeholder="Please enter your full name" type="text" ng-model="name">
<div id="button" ng-click="start('TEST')">Start Demo</div>
</div>
</body>
</html>
app.controller('appctrl', function ($scope) {
$scope.name = null;
$scope.show = function (name) {
console.log(name);
}
});
<div id="container" ng-controller="appctrl">
<input id="input" autocorrect="off" spellcheck="false" autocapitalize="off" autofocus="true" placeholder="Please enter your full name" type="text" ng-model="name">
<div id="button" ng-click="show(name)">Start Demo</div>
</div>
You're calling show() but you defined start()
I need to use same ng-app and same ng-controller multiple times in the same mvc view page.
<div ng-app="rootapp" ng-controller="rootcontroller">
<div id="div1">
---first content--------
<div ng-app="editorApp" ng-controller="editorController" ng-init="getInformation('SettingsDuplicates')">
<div class="col-sm-2 validation-right" style="width:12.666667%">
<div class="greySlideB">
#Html.Partial("~/Views/Shared/Information/_InformationPartial.cshtml")
#Html.Partial("~/Views/Shared/RecentNotes/_RecentNotesPartial.cshtml")
</div>
</div>
</div>
</div>
<div id="div2">
.......second content-------
<div ng-app="editorApp" ng-controller="editorController" ng-init="getInformation('SettingsDuplicates')">
<div class="col-sm-2 validation-right" style="width:12.666667%">
<div class="greySlideB">
#Html.Partial("~/Views/Shared/Information/_InformationPartial.cshtml")
#Html.Partial("~/Views/Shared/RecentNotes/_RecentNotesPartial.cshtml")
</div>
</div>
</div>
</div>
</div>
because ng-init function call parameter is different for each div. what is the best way to use same ng-app and ng-controller multiple times in another ng-app.
You can't have nested ng-app directives. To get around this you can create a "parent" app that incorporates the others, like this:
var rootApp = angular.module('rootApp', []);
var editorApp = angular.module('editorApp', []);
var mainApp = angular.module('mainApp', ['rootApp', 'editorApp']);
rootApp.controller('rootController', function($scope) {
$scope.name = 'root app';
});
editorApp.controller('editorController', function($scope) {
$scope.name = 'editor app';
});
<!DOCTYPE html>
<html ng-app="mainApp">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
</head>
<body>
<div ng-controller="rootController">
<p>Hello {{name}}!</p>
</div>
<div ng-controller="editorController">
<p>Hello {{name}}!</p>
</div>
</body>
</html>
A simplified version of the code:
<!DOCTYPE html>
<html ng-app="main">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="https://code.angularjs.org/1.4.3/angular.min.js"></script>
<script>
var app = angular.module("main", []);
app.controller("TestController", function($scope) {
$scope.addresses = [{street: ""}, {street: ""}];
$scope.next = function() {
if ($scope.addressMainForm.addressForm.$valid) {
console.log("valid");
} else {
console.log("invalid");
}
$scope.addresses.push({street: ""});
};
$scope.remove = function(index) {
$scope.addresses.splice(index, 1);
};
});
</script>
</head>
<body>
<div ng-controller="TestController" style="width: 500px;">
<form name="addressMainForm">
<div ng-repeat="address in addresses">
<ng-form name="addressForm">
<input ng-model="address.street" required name="street" type="text" placeholder="street" />
<button ng-if="$index > 0" ng-click="remove($index)">REMOVE</button>
</ng-form>
<br>
</div>
</form>
<br>
<button ng-click="next()">NEXT</button>
</div>
</body>
</html>
which looks in the browser like this:
When I click "REMOVE" and then "NEXT" - javascript error is produced:
Error: $scope.addressMainForm.addressForm is undefined
Why is it undefined if there is clearly still one element remaining in the array? Everything otherwise works fine (console.log output), until all the elements are removed but the last one and "NEXT" is clicked.
When you call $scope.addressMainForm.addressForm.$valid , you are attempting to call check to see if the adressForm element is valid, but your remove function has removed the addresses entry associated with that element. So the form indeed still exists, but that call becomes illegal.
Try this:
<!DOCTYPE html>
<html ng-app="main">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="https://code.angularjs.org/1.4.3/angular.min.js"></script>
<script>
var app = angular.module("main", []);
app.controller("TestController", function($scope) {
$scope.addresses = [{street: ""}, {street: ""}];
$scope.next = function() {
if ($scope.addressMainForm.$valid) {
console.log("valid");
} else {
console.log("invalid");
}
$scope.addresses.push({street: ""});
};
$scope.remove = function(index) {
$scope.addresses.splice(index, 1);
};
});
</script>
</head>
<body>
<div ng-controller="TestController" style="width: 500px;">
<form name="addressMainForm">
<div ng-repeat="address in addresses">
<ng-form name="addressForm">
<input ng-model="address.street" required name="street" type="text" placeholder="street" />
<button ng-if="$index > 0" ng-click="remove($index)">REMOVE</button>
</ng-form>
<br>
</div>
</form>
<br>
<button ng-click="next()">NEXT</button>
</div>
</body>
</html>
I'm getting my first taste of AngularJS, having build quite a lot with laravel as a backend. So I installed laravel and created an index.blade.php file. In it I have a ng-submit, but I can't get it to work.
<!doctype html>
<html lang="en" ng-app>
<head>
<meta charset="UTF-8">
<title>Laravel and AngularJS test</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
<script src="/js/main.js"></script>
</head>
<body>
<div ng-controller="TodoController">
<h1>Todo</h1>
<input type="text" placeholder="Search todos" ng-model="search">
<ul>
<li ng-repeat="to in todos | filter:search">
#{{ todo.body }}
</li>
</ul>
<form ng-submit="addTodo()">
<input type="text" placeholder="Add a todo" ng-model="newTodo">
<button type="submit">Add todo</button>
</form>
</div>
</body>
</html>
main.js
function TodoController($scope) {
$scope.todos = [
{ body: 'Groceries' },
{ body: 'Drive' }
];
$scope.addTodo = function() {
$window.alert('test');
};
}
Have a fiddle
angular.module('todoApp', [])
.controller('TodoController', ['$scope', '$window', function ($scope, $window) {
$scope.todos = [
{ body: 'Groceries' },
{ body: 'Drive' }
];
$scope.addTodo = function() {
$window.alert('test');
};
}]);
With html like:
<div ng-app="todoApp">
<div ng-controller="TodoController">
<h1>Todo</h1>
<input type="text" placeholder="Search todos" ng-model="search">
<ul>
<li ng-repeat="to in todos | filter:search">
#{{ to.body }}
</li>
</ul>
<form ng-submit="addTodo()">
<input type="text" placeholder="Add a todo" ng-model="newTodo"/>
<button type="submit">Add todo</button>
</form>
</div>
</div>
function TodoController($scope,$window) { .....
try to modify with this way :)
Controller should be define like following in main.js
angular.module('todoApp', []) .controller('TodoController', ['$scope', function($scope) {
}]);
Give name to ng-app to ng-app='todoApp' in html tag
I'm newbie to angular
My angular controller is:
var chatApp = angular.module('chatApp.controllers', []);
chatApp.controller('loginController', ['$scope', function($scope) {
$scope.user_name="name";
$scope.user_password="name";
}]);
the app.js is:
'use strict';
angular.module('chatApp', [
'ui.router',
'chatApp.filters',
'chatApp.services',
'chatApp.directives',
'chatApp.controllers'
]).config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('login', {
url: "/login",
templateUrl: "partials/login.html",
controller : "loginController"
})
});
login.html is:
<div>
<div id="wrapper">
<form name="login-form" class="login-form" action="" method="post">
<div class="header">
<h1>Login Form</h1>
</div>
<div class="content">
<input name="username" type="text" class="input username" placeholder="{{user_name}}" />
<div class="user-icon"></div>
<input name="password" type="password" class="input password" placeholder="{{user_password}}" />
<div class="pass-icon"></div>
</div>
</form>
</div>
I've used stateprovider for routing.
But, it's not showing anything in placeholder. What is the reason?
Solved the problem using ng-model instead of {{}}.
<div class="content">
<input name="username" type="text" class="input username" placeholder="username" ng-model="user_name" />
<div class="user-icon"></div>
<input name="password" type="password" class="input password" placeholder="password" ng-model="user_password"/>
<div class="pass-icon"></div>
</div>
This works for me if I say ng-controller = "loginController" in the html-
<div ng-controller = 'loginController'>
<div id="wrapper">
<form name="login-form" class="login-form" action="" method="post">
<div class="header">
<h1>Login Form</h1>
</div>
<div class="content">
<input name="username" type="text" class="input username" placeholder="{{user_name}}" />
<div class="user-icon"></div>
<input name="password" type="password" class="input password" placeholder="{{user_password}}" />
<div class="pass-icon"></div>
</div>
</div>
Here's a JSBin with it working: http://jsbin.com/aDuJIku/265/edit?html,js,output
This solution doesn't include ui-router, but it should work with it.
Try this:
var chatApp = angular.module('chatApp.controllers', []);
chatApp.controller('loginController', ['$scope','$timeout', function($scope,$timeout) {
$timeout(function(){
$scope.user_name="name";
$scope.user_password="name";
},100);
}]);
you just have to change to RouteProvider, In your case you just do:
angular.module('chatApp', [ 'ngRoute' 'ui.router','chatApp.filters','chatApp.services', 'chatApp.directives', 'chatApp.controllers'])
.config(function($routeProvider) {
$routeProvider.when('/login', { templateUrl: "partials/login.html", controller: "loginController" })
});
please make sure that you have angular-route js included.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.11/angular.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.11/angular-route.js"></script>
Hope this help you! ;)
Here's some examples for you this
Below mentioned code works.
Note: If somebody tries to run this code in preview its not going to work. JS and HTML code needs to be copied in separate file and use the names mentioned.
var myContrlApp = angular.module('ContrlApp', []);
myContrlApp.controller('MainController', function ($scope) {
var person = {
firstName: "Keith",
lastName: "Jackson",
};
$scope.message = "Welcome, Angular !";
$scope.person = person;
});
<html ng-app="ContrlApp">
<head>
<script type="text/javascript" src="Scripts/angular.js"></script>
<script type="text/javascript" src="Scripts/angular-route.js"></script>
<script type="text/javascript" src="Scripts/script.js"></script>
<!--<link rel="stylesheet" href="style.css" />-->
<title>Angular JS Tryout</title>
</head>
<body ng-controller="MainController">
<div>
<h1>{{message}}</h1>
<div>
<div>First name: {{person.firstName}}</div>
<div>Last name: {{person.lastName}}</div>
</div>
</div>
</body>
</html>