I'm new at angularjs and i'm having some serious problems lol...
I've something like this that is working so i don't know whats the problem with this code.. can you help me pls?
Here is it: Basicly the scope.create does not work.. it doesn't even enter in the function..
<!DOCTYPE html>
<html>`enter code here`
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-resource/1.6.5/angular-resource.min.js"></script>
<script>
var app = angular.module('myAppDevice', ['ngResource']);
app.controller('deviceCtrl', ['$scope', '$resource', function($scope,$resource) {
$scope.create = function(a){
console.log("ola");
Device = $resource(
"http://localhost:8080/userapi/postdevice/:userId/:deviceType",
{},
{save: {method:'POST',isArray:false, params: {userId: '#userId',deviceType:'#deviceType'}}}
);
$scope.Message = Device.save({externalId: $scope.deviceForm.userId, deviceType:a});
$scope.deviceForm.userId = "";
};
}]);
function func(){
console.log("ole");
}
app.controller('deviceCtrl', function($scope) {
$scope.myVar = false;
$scope.toggle = function() {
$scope.myVar = !$scope.myVar;
};
});
</script>
</head>
<body ng-app="myAppDevice">
<div ng-controller="deviceCtrl">
<form name="deviceForm">
<div class="form-group">
<img id="device" alt="sensor"
src="http://www.solucoesindustriais.com.br/images/produtos/imagens_10048/p_sensor-de-movimento-para-porta-12.jpg"
width="300" height="150" ng-click="toggle()" />
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<div class="form-group">
<p ng-show="myVar">
userId: <input ng-model="deviceForm.userId" type=text>
</p>
</div>
<div class="btn-wrapper">
<div class="row-gutter-5">
<div class="col-md-4 col-xs-6 col-sm-6">
<button class="btn btn_blue" type="button"
data-ng-click="create(lamp)" id="Create">Create</button>
</div>
</div>
</div>
</form>
</div>
</body>
</html>
Thanks
[EDIT] Thanks guys!! it was solved by removing the controller as you said.. i was starting to be desperate !!
you are duplicating your controller by calling twice "deviceCtrl". Keep it once and try. As the code compiles and execute the latest deviceCtrl will get called and hence the $scope.create() not getting called.
Just remove Second deviceCtrl
app.controller('deviceCtrl', function($scope) {
$scope.myVar = false;
$scope.toggle = function() {
$scope.myVar = !$scope.myVar;
};
});
Here is an working example.
Related
I have tried many different things to try to get this to work.
I have read:
ng-click not firing in AngularJS while onclick does
AngularJS : ng-click not working
and a lot more
Html:
<div ng-controller="testApp">
<div id="bla">
<button ng-click="obey('bla')">Close</button>
<h4>Bla bla bla</h4>
</div>
</div>
JS:
var testApp = angular.module('testApp', []);
testApp.controller('testController', function($scope) {
$scope.obey = function test(id) {
$("#" + id).fadeOut("slow", function() {
this.remove()
});
};
});
For some reason the div does not fade out at all.
You specified your app name in controller. check this.
var testApp = angular.module('testApp', []);
testApp.controller('testController', function($scope) {
$scope.obey = function test(id) {
$scope.hide= !$scope.hide;
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="testApp" ng-controller="testController">
<div id="bla">
<button ng-click="obey('bla')">Close</button>
<h4 ng-hide="hide">Bla bla bla</h4>
</div>
</div>
Seems to me it's something wrong with name of your controller. Try this:
<div ng-app="testApp" ng-controller="testController">
<div id="bla">
<button ng-click="obey('bla')">Close</button>
<h4>Bla bla bla</h4>
</div>
you can use a ng-show or ng-hide in this case
<div ng-controller="testApp">
<div id="bla">
<button ng-click="obey()">Close</button>
<h4 ng-show="viewDiv">Bla bla bla</h4>
</div>
</div>
var testApp = angular.module('testApp', []);
testApp.controller('testController', function($scope) {
$scope.viewDiv = true;
$scope.obey = function test(id) {
$scope.viewDiv = !$scope.viewDiv;
};
});
for angular animation - refer LINK
specified proper "ng-app" and "ng-controller" name
HTML ie.
<body ng-app="testApp">
<div ng-controller="testController">
<div id="bla">
<button ng-click="obey('bla')">Close</button>
<h4>Bla bla bla</h4>
</div>
</div>
<body>
The idea is to create a function that triggers a pop up when clicking on the word.
This is what I have done so far:
HTML
<div class="contenu" >
<div class="box1">
MyRhoom
<div class="bordered" ng-show="collapsedd">I am description</div>
</div>
Js controller
angular.module('starter.toolsController', ['ionic'])
.controller('toolsCtrl', function ($scope){
$scope.collapsedd="false";
$scope.toggle=function()
{
$scope.collapsedd=!$scope.collapsedd;
};
});
But I get this:
Meaning that the pop up is fired already!
How to fix this?
I think there is no big problem with your code. I've just replaced $scope.collapsedd = 'false' with $scope.collapsedd = false and it has been working.
HTML
<div class="contenu" ng-controller="toolsCtrl">
<div class="box1">
MyRhoom
<div class="bordered" ng-show="collapsedd">I am description</div>
</div>
</div>
JS
var myApp = angular.module('myApp', []);
myApp.controller('toolsCtrl', function($scope) {
$scope.collapsedd = false;
$scope.toggle = function() {
$scope.collapsedd = !$scope.collapsedd;
};
});
When clicking module class it shows emptylabel. but i cant hide the module class.
<div id="b" class="tab-pane fade in active" >
<div class="secondrow">
<div ng-show="divshow">
<label class="emptylabel"> <input type="button" value="back" class="backbutton" ng-click="hidediv()"></label>
</div>
<div class="module">
<a href="#/b" class="{{module}}" ng-click="showdiv()">
<div class="col-sm-4"><label>Jawaharlal Nehru</label></div>
<div class="col-sm-1"><label>111111</label></div>
<div class="col-sm-2"><label>2222222</label></div>
<div class="col-sm-3"><label>3333333</label></div>
</a>
</div>
Controller:
app.controller('myController', ['$scope', function($scope) {
$scope.showdiv = function () {
$scope.divshow = true;
$scope.module = false;
}
// Hide Div
$scope.hidediv = function () {
$scope.divshow = false;
}
}]);
I'm not sure if I understand your question correctly. If you want to toggle between the emptylabel and module, the you can use ng-show for both of them, based on the divshow variable:
<div ng-show="divshow">
<label class="emptylabel">
<input type="button" value="back" class="backbutton" ng-click="hidediv()">
</label>
</div>
<div class="module" ng-show="!divshow">
<a href="#/b" class="{{module}}" ng-click="showdiv()">
...
</a>
</div>
controller:
app.controller('myController', ['$scope', function($scope) {
$scope.showdiv = function () {
$scope.divshow = true;
}
$scope.hidediv = function () {
$scope.divshow = false;
}
}]);
What does your ng-controller declaration in the HTML look like? For example mine usually look something like this, with the capture variable 'vm':
<div data-ng-controller="FooController as vm">
<div>
<span data-ng-click="vm.showDiv()"></span>
</div>
</div>
Inside your controller:
function FooController() {
var vm = this;
vm.showDiv = showDiv;
function showdiv() {
// Your code here
}
}
How can I take a input value and put into a variable in angularJS?
this is the working testing version on my page but I did javascript and jquery together with angularJS to make it work but it is still giving me errors.
I know there must be a way to take the input value and put it inside of a var value through angularJS with out writting it manually how I'm doing it.
http://www.jaysg.com/poster
index.html
<div class="header">
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>Find That Poster</h1>
<div class="searchbox">
<button ng-click="start()" class="searchButton" id="btnSearch" value="Search">Search</button>
<p></p>
<input onkeydown="if (event.keyCode == 13) document.getElementById('btnSearch').click()">
</div>
</div>
</div>
</div>
</div>
<div class="content" ng-controller="StoreController as store">
<div class="container">
<div class="row">
<div >
<div class="col-md-3 posterImg" ng-repeat="product in store.products.results">
<span><img ng-src="http://image.tmdb.org/t/p/w300{{product.poster_path}}" class="img-responsive"></span>
<div >
<!-- <h2> {{product.original_title}}</h2>-->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
app.js // angular
(function() {
var app = angular.module('store', ['store-products']);//main app ng-app
app.controller('StoreController',[ '$http', function($http){
var store = this;
store.products = [ ];
$(document).ready(function() {
$( "input" ).keyup(function() {
var value = $( this ).val();
$('button').click(function() {
$http.get("http://api.themoviedb.org/3/search/movie?api_key=2f6ab7c6dc3db52d34703aae308640ef&query=" + value ).success(function(data){
store.products = data;
});
});
})
.keyup();
});
}]);
})();
You need the ng-model attribute.
Example:
<input onkeydown="if (event.keyCode == 13) document.getElementById('btnSearch').click()" ng-model="search">
Then you can access the variable using $scope.search.
As I can see you are currently not injecting the $scope.
This is how to do it:
app.controller('StoreController', ['$scope', '$http', function($scope, $http){
See more in the docs.
It would also be advisable to rewrite your jquery event handlers to angular event handlers.
So instead of $('button').click(function() {, create a $scope.start() function that is bound to the click event of the search button.
to get the value of the variable use ng-model and to listen for the key down use ng-keydown
<div class="searchbox">
<button ng-click="search()" class="searchButton" id="btnSearch" value="Search">Search</button>
<p>
</p>
<input ng-keydown="press($event)" ng-model="searchField" >
</div>
and in your controller you call the functions you just bound to your dom elements
app.controller('StoreController', [
'$scope',
'$http',
function ($scope, $http) {
$scope.press = function (e) {
console.log(e.keyCode);
if (e.keyCode == 13) {
$scope.search();
}
};
$scope.search = function (e) {
$http.get("http://api.themoviedb.org/3/search/movie?api_key=2f6ab7c6dc3db52d34703aae308640ef&query=" + $scope.searchField )
.success(function(data){
$scope.products = data;
});
};
}
]);
I have created two directives and included them in my html. However, only the first one executes and nothing after it.
<div ng-app="myApp">
<div ng-controller="MyCtrl">
<div directive-one=""/>
<div directive-two=""/>
<div> Hello I am {{name}} and I am {{age}} years old!</div>
</div>
<script type="text/ng-template" id="myTemplate.html">
<div>Name: <input type='text' ng-model='name'/></div>
</script>
</div>
Javascript:
var app = angular.module('myApp', []);
app.controller('MyCtrl', function ($scope) {
$scope.name = "Jason";
$scope.age = "20";
});
app.directive('directiveOne', function () {
return {
replace: true,
template: "<div>Age: <input type = 'text' id = 'age' ng-model='age'>
</input></div>"
}
});
app.directive('directiveTwo', function () {
return {
replace: true,
templateUrl: "myTemplate.html"
}
});
Here is the fiddle: DEMO
Can't figure out what the issue is. Any help is appreciated.
You have to close your div tags with the directives in them and you don't need the ="" after either.
<div directive-one></div>
<div directive-two></div>
Here's an updated fiddle with it working.