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
}
}
Related
I have created a ng-repeat of blocks where I would like to edit a block in a modal window and cancel the window to discard any changes.
I have managed to get the modal window working and editing blocks as I want however I am trying to use angular.copy to create a backup of the original element and set it when cancel is clicked.
here is my html for my ng-repeat:
<div class="container" style="max-width: 600px;">
<div ng-repeat="block in blocks" class="text-muted" ng-drop="true" ng-drop-success="onDropComplete($index, $data ,$event)">
<div class="row" ng-show="textBlock(block)" ng-click="showEditButtons()" ng-drag="true" ng-drag-data="block">
<h4> {{ block.title }} </h4>
<p> {{ block.body }} </p>
<button class="btn btn-default" ng-show="showButtons" ng-click="editBlock(block); modalUpdate(block)">Edit!</button>
<button class="btn btn-default" ng-show="showButtons" ng-click="deleteBlock(block)">Delete!</button><br>
<br>
</div>
</div>
</div>
and here is my html for the modal:
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3 class="modal-title">I'm a modal!</h3>
</div>
<div class="modal-body">
<form class="form-group">
<input class="form-control" placeholder="Title" type="text" ng-model="block.title" ng-model="titleText"/>
<input class="form-control" placeholder="Main Body" type="text" ng-model="block.body" ng-model="bodyText"/>
<button class="btn btn-success" type="submit" ng-click="saveBlock()"> Save </button>
<button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
</form>
</div>
</script>
and here is the modal part of the controller:
$scope.modalUpdate = function (selectedBlock) {
var modalInstance = $uibModal.open({
animation: $scope.animationsEnabled,
templateUrl: 'myModalContent.html',
controller: function($scope, $uibModalInstance, block){
$scope.backUp = angular.copy(block);
$scope.block = block;
$scope.saveBlock = function () {
$uibModalInstance.close($scope.block);
};
$scope.cancel = function () {
block = $scope.backUp;
$uibModalInstance.dismiss('cancel');
};
},
size: 'sm',
resolve: {
block: function () {
return selectedBlock;
}
}
});
};
However every time I click cancel the changes to the block are still saved and nothing is reverted.
Any help would be awesome!
Try to remove the line
$scope.cancel = function () {
// block = $scope.backUp; <--- this one
$uibModalInstance.dismiss('cancel');
};
controller: function($scope, $uibModalInstance, block){
$scope.backUp = angular.copy(block);
$scope.block = block;
// the above line does not create new instance of $scope.block instead links to block, so whenever $scope.block gets updated, block also gets updated
Change Your code as :
HTML :
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3 class="modal-title">I'm a modal!</h3>
</div>
<div class="modal-body">
<form class="form-group">
<input class="form-control" placeholder="Title" type="text" ng-model="data.title" ng-model="titleText" />
<input class="form-control" placeholder="Main Body" type="text" ng-model="data.body" ng-model="bodyText" />
<button class="btn btn-success" type="submit" ng-click="saveBlock()"> Save </button>
<button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
</form>
</div>
</script>
Have changed ng-model to bind to data object
JS :
$scope.modalUpdate = function (selectedBlock) {
var modalInstance = $uibModal.open({
animation: $scope.animationsEnabled,
templateUrl: 'myModalContent.html',
controller: function ($scope, $uibModalInstance, block) {
$scope.data = {};
$scope.data.title = block.title;
$scope.data.body = block.body;
$scope.saveBlock = function () {
block.title = $scope.data.title;
block.body = $scope.data.body;
$uibModalInstance.close($scope.block);
};
$scope.cancel = function () {
$uibModalInstance.dismiss('cancel');
};
},
size: 'sm',
resolve: {
block: function () {
return selectedBlock;
}
}
});
};
Have assigned to $scope.block only if saveBlock is triggered otherwise nothing happens on cancel
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;
};
});
I just started learning so I'm creating a todo app.
I'm trying to show a div when I click on the edit button to edit my task.
this is my html
<div ng-controller='TasksCtrl'>
<div ng-repeat='(key, task) in tasksList' class='task-list'>
<div class='easy'>
<div class='div-list-style'></div>
<div id='task-{{key}}' style='cursor:pointer;z-index:5'
ng-click='editTask()' data-key='{{key}}' class='options
pull-right glyphicon glyphicon-pencil'>
</div>
<div class='task-desc' ng-bind='task.description'></div>
<div ng-hide='taskEdit = true'>FORM</div>
</div>
</div>
</div
This is my controller
todoApp.controller('TasksCtrl',['$scope', 'saveTaskService', function($scope, saveTaskService){
$scope.editTask= function(){
todoApp.directive('taskEdit', function(){
return function(scope, element){
//so I guess over here I need do ngHide = 'false' ? //
alert(element.attr('data-key'));
};
});
};
}]);
Here is a quick solution, you have a scope variable called taskShow that will tell ng-hide when to show it, then on ng-click you will trigger a function that will toggle that value:
<div ng-controller='TasksCtrl'>
<div ng-repeat='(key, task) in tasksList' class='task-list'>
<div class='easy'>
<div class='div-list-style'></div>
<div id='task-{{key}}' style='cursor:pointer;z-index:5'
ng-click='toggleHide(key)' data-key='{{key}}' class='options
pull-right glyphicon glyphicon-pencil'>
</div>
<div class='task-desc' ng-bind='task.description'></div>
<div ng-show='taskShow[key]'>FORM</div>
</div>
</div>
</div>
Controller:
todoApp.controller('TasksCtrl',['$scope', 'saveTaskService', function($scope, saveTaskService){
$scope.taskShow = {};
$scope.toggleHide = function (key) {
$scope.taskShow[key] = !$scope.taskShow[key];
};
}]);
Edit: switched ng-hide to ng-show so the divs are hidden by default and only shown when the other is clicked.
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'm not sure why this is not changing when its bound object changes:
My HTML:
<div id="account-info" ng-controller="AuthenticateCtrl">
<h5>Account: </h5>
{{account}}
</div>
<div ng-controller="AuthenticateCtrl">
<div modal="shouldBeOpen" options="opts">
<div class="modal-header">
<h3>Select your account</h3>
</div>
<div class="modal-body">
<div class="account-btn" ng-repeat="item in items" ng-click="close(item)">
{{item}}
</div>
</div>
</div>
</div>
My JavaScript:
var AuthenticateCtrl = function ($scope) {
$scope.account= "";
$scope.open = function() {
$scope.shouldBeOpen = true;
};
$scope.close = function(item) {
if (item) {
$scope.shouldBeOpen = false;
$scope.account= item;
}
};
}
For some reason it always displays nothing, or if I set $scope.account = "ANY STRING" it will display "ANY STRING" but won't update when the close function is called.
Ok an attempt with fiddle. Firstly you had two ng-controller directives pointing to the same function. Secondly I don't really understand the domain here, but I'm guessing this is what you need. Heres a fiddle.
<div ng-controller="AuthenticateCtrl">
<div id="account-info">
<h5>Account: </h5>
{{account.name}}
</div>
<div>
<div modal="shouldBeOpen" options="opts">
<div class="modal-header">
<h3>Select your account</h3>
</div>
<div class="modal-body">
<div class="account-btn" ng-repeat="item in items" ng-click="close(item)">
{{item.name}}
</div>
</div>
</div>
</div>
</div>
<script>
var myApp = angular.module('myApp',[]);
var AuthenticateCtrl = function ($scope) {
$scope.opts = {};
$scope.account = {};
$scope.items = [
{'name':'one'},
{'name':'two'}
];
$scope.open = function() {
$scope.shouldBeOpen = true;
};
$scope.close = function(item) {
if (item) {
$scope.shouldBeOpen = false;
$scope.account= item;
}
};
}
</script>