I'm pretty new to angular and I'm kind of stuck with an issue. I have an ng-repeat that shows items. In the items I have a "show more info" button, which when you click it should cause the a new view to replace the current one (including the show more info button). The new view would then have a "go back" button which will switch back to the original state.
Unfortunately I can't seem to figure out how to get this to work.
This is as far as I've gotten...
<article ng-repeat="item in items" class="items">
<div ng-switch on="view">
<div ng-switch-default>
<p>Default State for {{item}}</p>
<div class="btn">More Info
</div>
<div ng-switch-when="info">
<p>Info for {{item}}</p>
<div class="btn">Go back</div>
</div>
</div>
</article>
If someone could help me out here I would appreciate it. Thank you.
You can set the value of view when button is clicked. I would advise you to use item.view instead of view, it will prevent view of other elements to be toggled.
<article ng-repeat="item in items" class="items">
<div ng-init="viewDefaultValue = item.view;" ng-switch on="item.view">
<div ng-switch-default>
<p>Default State for {{item}}</p>
<div class="btn" ng-click="item.view = 'info';">More Info</div>
</div>
<div ng-switch-when="info">
<p>Info for {{item}}</p>
<div class="btn" ng-click="item.view = viewDefaultValue;">Go back</div>
</div>
</div>
</article>
Here is an working example.
(function() {
angular
.module('myApp', [])
.controller('myController', function($scope) {
$scope.items = [{
view: '',
text: 'item1'
}, {
view: '',
text: 'item2'
}]
});
})();
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myController">
<div ng-repeat="item in items" class="items">
<div ng-init="viewDefaultValue = item.view;" ng-switch on="item.view">
<div ng-switch-default>
<p>Default State for {{item.text}}</p>
<div class="btn" ng-click="item.view = 'info';">More Info
</div>
</div>
<div ng-switch-when="info">
<p>Info for {{item.text}}</p>
<div class="btn" ng-click="item.view = viewDefaultValue;">Go back</div>
</div>
</div>
</div>
use ng-hide and ng-show instead of ng-switch
<article ng-repeat="item in items" class="items">
<div ng-show="isviewvisible">
<div>
<p>Default State for {{item}}</p>
<div class="btn" ng-click="more()">More Info
</div>
<div ng-hide="isviewvisible">
<p>Info for {{item}}</p>
<div class="btn" ng-click="goBack()">Go back</div>
</div>
</div>
</article>
now in angularjs
$scope.isviewvisible = true;
$scope.more = function(){
$scope.isviewvisible = false;
}
$scope.goBack = function(){
$scope.isviewvisible = true;
}
when you clicked the more() it will hide the view and will show the moreinfo
when you click the goBack() it will hide the moreifo and will show the view
Related
I get a problem when creating a dropdown list. When I trigger the dropdown by toggle the "show-item" class, it doesn't work. Can you guys help me to see what happen? Thx!!! There's the code below
var duration_dropdown = document.getElementById('duration-dropdown');
var mins_ctn = document.getElementById('mins-ctn');
duration_dropdown.onclick = function(){
mins_ctn.classList.toggle('show-item')
}
<body>
<div class="container">
<div class="title">
<h1>Dropdown Demo</h1>
</div>
<div class="dropdown-ctn">
<div class="dropdown">
<button id="duration-dropdown" class="dropdown-mins">MM</button>
<div class="mins-ctn" id="mins-ctn">
<span class="minute">01</span>
<span class="minute">02</span>
<span class="minute">03</span>
<span class="minute">04</span>
</div>
</div>
</div>
</div>
<script src="dropdown.js"></script>
</body>
I want to launch a new page when a cube is clicked using Angular. My code is currently not doing anything when I click the boxes so I might have everything wrong.
My on-click function is:
$scope.clicked = function(){
console.log('pppp');
window.location = "#/test.html";
}
I call the function in my HTML like this:
<html>
<link href="https://fonts.googleapis.com/css?family=Bungee+Hairline" rel="stylesheet">
<header>
Angularity
</header>
<body ng-app="App">
<div ng-click="clicked()" class="wrap">
<div class="cube" change-background colorcode=¨#f45642¨>
<div class="front" ><span>E</span></div>
<div class="back" ></div>
<div class="top" ></div>
<div class="bottom" ></div>
<div class="left" ></div>
<div class="right" ></div>
</div>
</div>
<div class="wrap2">
<div class="cube" change-background>
<div class="front" colorcode=¨#f45642¨><span>S</span></div>
<div class="back"></div>
<div class="top"></div>
<div class="bottom"></div>
<div class="left"></div>
<div class="right"></div>
</div>
</div>
<div class="wrap3">
<div class="cube" change-background>
<div class="front" colorcode=¨#f45642¨><span>C</span></div>
<div class="back"></div>
<div class="top"></div>
<div class="bottom"></div>
<div class="left"></div>
<div class="right"></div>
</div>
</div>
</body>
</html>
What is wrong with my code that is not allowing a new link to launch when a box is clicked?
http://codepen.io/Feners4/pen/KggAwg
You need to define the ng-controller and define the clicked function there.
<body ng-app="App">
<div ng-controller="TestCtrl">
.....
</div>
</body>
Here's a fixed version. The problem in your original code pen was that the div element was outside your directive. You also defined $scope.clicked in the wrong spot. I've created a new directive myClick, so it now the HTML looks like
<div ng-click="clicked()" my-click class="wrap">
<div class="cube" change-background colorcode="#f45642">
</div>
</div>
And the directive definition is here:
angular.module('App', [])
.directive('changeBackground', () => {...})
.directive('myClick', () => {
return {
restrict: 'A',
link: (scope) => {
scope.clicked = () => {
console.log('pppp');
window.location = "#/test.html";
}
}
};
});
http://codepen.io/phillypham/pen/PbgXOE
If you don't want to create a new controller and you want just to redirect the user to that url, you can add the click event on your directive:
link: function($scope, element, attr) {
element.on('click', function() { window.location = "#/test.html"; });
[omissis]
enter code here
for example I have this html code:
<div class="product">
<p>Name1<p>
</div>
<div class="product">
<p>Name2<p>
</div>
<div class="product">
<p>Name3<p>
</div>
<div class="product">
<p>Name4<p>
</div>
<div class="settings">
<p>SETTINGS<p>
</div>
I made settings class to display nothing in css, unless I click on one of 4 p elements in product class. After click the settings class appears at the bottom as it should be.
How should I make that if I click for example Name2 then settings class appears after Name2 and not at the bottom?
Use $(this) to target the element you clicked on, combined with insertAfter() to add the content to this element.
Run the code snippet below and click on any of the elements with the classname product to see how this works.
$(".product").click(function(){
$(".settings").insertAfter($(this));
});
$(".product").click(function(){
$(".settings").insertAfter($(this));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="product">
<p>Name1
<p>
</div>
<div class="product">
<p>Name2
<p>
</div>
<div class="product">
<p>Name3
<p>
</div>
<div class="product">
<p>Name4
<p>
</div>
<div class="settings">
<p>SETTINGS
<p>
</div>
You can use .insertAfter() :
$(function(){
$('.product p').click(function(){
$('.settings').insertAfter($(this).closest('.product '))
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="product">
<p>Name1<p>
</div>
<div class="product">
<p>Name2<p>
</div>
<div class="product">
<p>Name3<p>
</div>
<div class="product">
<p>Name4<p>
</div>
<div class="settings">
<p>SETTINGS<p>
</div>
You can do it like,
$(".product > p").click(function(){
var $parent = $(this).parent(".product");
$parent.siblings(".settings").insertAfter($parent);
});
by using .insertAfter()
DEMO
I'm trying to load a form using foundation's reveal modal, i need to run a angular controller inside the form to enable the form submission using ajax and not the default post/refresh behaviour.
this is my main view:
<html lang="es" ng-app="crm">
<body>
<script>
var crmapp = angular.module('crm', ['ng.django.forms',"ui.select"]);
</script>
<a data-reveal-id="idmodal" class="fi-burst" data-reveal-ajax="true" href="/operador/clientes/saldos/anadir/13">Añadir Pago</a>
<div id="idmodal" class="reveal-modal" data-reveal aria-labelledby="modalTitle" aria-hidden="false">
</div>
</body>
and this is my form:
<div class="row" ng-controller="dummy">
<h2>Añadir Pago</h2>
<ng-form>
<label>Fecha de Cobro:</label>
<label>Valor:</label>
<div class="row">
<div class="columns small-offset-5 small-7">
<button class="buttons success round" ng-click="alert(5)">Añadir</button>
</div>
</div>
</ng-form>
</div>
<script>
crmapp.controller('dummy', function($scope) { $scope.greeting = 'Hola!';console.log("bye"); });
</script>
<a class="close-reveal-modal" aria-label="Close">×</a>
</div>
any "regular" javascript code in the form is called, but the angular controller isnt working. what can i do?
Here is how to work with ng-click and controller:
JSFiddle
HTML:
<div ng-app="myApp">
<div class="row" ng-controller="dummy">
<h2>Añadir Pago</h2>
<ng-form>
<label>Fecha de Cobro:</label>
<label>Valor:</label>
<div class="row">
<div class="columns small-offset-5 small-7">
<button class="buttons success round" ng-click="greeting()">Añadir</button>
</div>
</div>
</ng-form>
</div>
<a class="close-reveal-modal" aria-label="Close">×</a>
</div>
JS:
angular.module('myApp', [])
.controller('dummy', ['$scope', function ($scope) {
$scope.greeting = function () {
console.log("bye");
};
}]);
i have a html like this
<div class="main" ng-controller="firstcontroller">
<div class="submain">
<div class="first" ng-show="display">displayed</div>
<div class="second" my-directive>click</div>
</div>
<div class="submain">
<div class="first" ng-show="display">displayed</div>
<div class="second" my-directive>click</div>
</div>
<div class="submain">
<div class="first" ng-show="display">displayed</div>
<div class="second" my-directive>click</div>
</div>
</div>
I have controller like this
app.controller('firstcontroller',function($scope)
{
$scope.display=false;
});
my directive coding like this
app.directive('myDirective',function(scope, element, attrs)
{
return function()
{
element.bind('click',function()
{
element.prev().show();
//alert(element.prev().attr('class'));
// element.parent().find('.main').append('<div>Some text</div>')
});
}
});
here initially div will be hidden if div has class name fist , only div having class name second will be displayed . so when we click on click div we have to show only previous div of that clicked div..... how to show previous div of clicked div in angular.js ?
I get the feeling that the question is missing information. E.g. are the .submain divs hardcoded, or created by iteration?
If however this is indeed the case, the directive is redundant. Change the HTML as:
<div class="main" ng-controller="firstcontroller">
<div class="submain">
<div class="first" ng-show="display[0]">displayed</div>
<div class="second" ng-click="display[0] = !display[0]">click</div>
</div>
<div class="submain">
<div class="first" ng-show="display[1]">displayed</div>
<div class="second" ng-click="display[1] = !display[1]">click</div>
</div>
<div class="submain">
<div class="first" ng-show="display[2]">displayed</div>
<div class="second" ng-click="display[2] = !display[2]">click</div>
</div>
</div>
And the controller:
app.controller('firstcontroller',function($scope) {
$scope.display=[false, false, false];
});