All the default elements are hidden.
$scope.hide=false;
ng-if="hide"
I want it when I click on a link, it shows the corresponding element. But I do not know how to show only the element that corresponds. For example if I click on
<li> section1 </ li>
The element with the 'section1' id must be displayed. After that, I do not know why the element is not found.
Var myEl = angular.element (document.querySelector ('#' + id));
Do this using the ng-if statement.
http://jsfiddle.net/8jmnpn2u/
Thank you very much.
Here is your solution
http://jsfiddle.net/8jmnpn2u/2/
Simply you can do it by $scope variable
Define $scope.currentDiv = "";
and on show function just update $scope.currentDiv
Your HTML code
<body ng-app="myApp" ng-controller="myCtrl">
<nav>
<ul>
<li>section1</li>
<li>section2</li>
<li>section3</li>
</ul>
</nav>
<section id='section1' ng-if="currentDiv == 'section1'">
1
</section>
<section id='section2' ng-if="currentDiv == 'section2'">
2
</section>
<section id='section3' ng-if="currentDiv == 'section3'">
3
</section>
</body>
Angular controller
// the main (app) module
var myApp = angular.module("myApp", ['ui.swiper']);
// add a controller
myApp.controller("myCtrl", function($scope) {
$scope.msg = "hello world";
$scope.currentDiv = "";
$scope.show= function(id){
$scope.currentDiv = id;
}
});
Try this: if you create an array to keep the 'hide' value of yor sections, you can control them independently
<body ng-app="myApp" ng-controller="myCtrl">
<nav>
<ul>
<li>section1</li>
<li>section2</li>
<li>section3</li>
</ul>
</nav>
<section id='section1' ng-if="hide['section1']">
1
</section>
<section id='section2' ng-if="hide['section2']">
2
</section>
<section id='section3' ng-if="hide['section3']">
3
</section>
</body>
the main (app) module
var myApp = angular.module("myApp", ['ui.swiper']);
myApp.controller("myCtrl", function($scope) {
$scope.hide = [];
$scope.show= function(id){
$scope.hide[id] = true;
var myEl = angular.element( document.querySelector( '#'+id ));
}
});
Here's the jsfiddle http://jsfiddle.net/2c71bjuu/
Related
When I compile my code there is an error with angular.
The code is written from a book, and it works when I load the page using the code at the end of the question.
There seems to be two issues from what I have read. Where do I put the $scope and $compile code?
Mostly, the question is how do I load a document ready trigger with a button for angular JS?
Or should I always load the angular js and hide the code?
<div id="myTabs">
<div class="menu">
<ul class= "tabs">
<li >LIST</li>
<li >GRID</li>
<li >GRID</li>
</ul>
</div>
<div class="container" style="margin-top:100px">
<div id="a">
</div>
<div id="b">
<ul class="gallery-items" id="grid">
</ul>
</div>
<div id="c" >
<div ng-controller="myController">
<div ng-repeat="item in items">
<img ng-src="{{item.img}}" />
{{item.description}}<br>
Rating: {{item.rating}} stars<br>
<span ng-repeat="idx in stars"
ng-class=
"{true: 'star', false: 'empty'}[idx <= item.rating]"
ng-click="adjustRating(item, idx)">
</span>
<hr>
</div>
</div>
</div>
</div>
ajax.js has a function that calls the #c tab to load
$(document).ready(function(){
$('#listC').click(function(){
angular.module('myApp', [])
.controller('myController', ['$scope', function($scope) {
$scope.stars = [1,2,3,4,5];
$scope.items = [100];
$.ajax({
type:'post',
url:'changeView.php',
data:{action: 'getGrid'},
success:function(data){
var data = JSON.parse(data);
for (i=0;i<data.length;i++) {
var imageLI = makeImage(data[i]['imageID'], data[i]['name'], data[i]['desc']);
$scope.items[i] = imageLI;
}
}
});
console.log($scope.items);
$scope.adjustRating = function(item, value){
item.rating = value;
};
}]);
});
$('#listC').trigger('click');
function makeImage(ID, name, description){
var image = {
description: description,
img: '../uploads/'+name,
rating: 4
}
return image;
I am trying to get an inner value of an element by selecting through the class in angular. But for some reason it keeps giving me an error when I try to select var highlighted = angular.element(element.getElementsByClassName("btn-danger")); This is the error
angular.js:13642TypeError: angular.element.getElementsByClassName is not a function
Could it be because I am mixing angular and jquery together
the main problem is in the click controller.
it gets the value of the ul that gets loaded with the json and supposed to show on the bottom in the mouse click me(the number is just for testing)
the project is a single click keyboard that will eventually have an interval and switch keys so a disabled person can type with only one click
here is the view
<body ng-controller="mainController" ng-click="textArea = textArea + 1">
<div ng-controller="clickController">
<header>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">Click and Type</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><i class="fa fa-home"></i> Home</li>
</ul>
</div>
</nav>
</header>
<div class="container">
<div ng-controller="intervalController">
<ul class="general_button" ng-repeat="letter in language[0].rows track by $index" ng-init="rowIndex = $index"> {{rowIndex}}
<button type="button" class="btn " ng-class="{true:'btn-danger', false:'btn-info'}[rowIndex ==isSelected() || columnIndex == isSelected()]" ng-repeat="single in letter track by $index" ng-init="columnIndex = $index">
{{columnIndex}}{{single}}
</button>
</ul>
<div >
<h1 ng-mousemove="textArea = textArea + 1">Mouse over me!</h1>
<label for="inputlg">input-lg</label>
<input class="form-control input-lg" id="inputlg" type="text" value="{{ textArea + highlightedLetter }}">
</div>
</div>
</div>
</div>
</body>
</html>
and here is the model
var App = angular.module('App', []);
var theLanguage = 'english';
App.factory('jsonLanguage', function($http){
var theLanguage = 'english';
return {
get: function(theLanguage){
//var url = theLanguage + '.json';
var url = 'english.json';
return $http.get(url);
}
}
});
App.controller('mainController', function($scope, $http, $log, jsonLanguage) {
jsonLanguage.get().then(function(res){
$scope.language = res.data;
$log.log($scope.language);
});
$scope.isSelected = function(rowIndex, columnIndex) {
return 0;
}
});
App.controller('intervalController', function($scope, $log) {
this.$log = $log;
//var name = $scope.single;
//$log.log(name);
});
App.controller('clickController', function($scope, $log) {
$scope.$log = $log;
var highlighted = angular.element(angular.element.getElementsByClassName("btn-danger"));
alert($scope.highlightedLetter = highlighted.value);
});
I greatly appreciate any help as I am new to angular.
There's no getElementsByClassName method in Jquery. Try using standard DOM query:
var highlighted = angular.element(document.querySelector(".btn-danger"));
getElementsByClassName is a function of DOM element, not jQuery.
Try this, it might help you:
var classElement = document.getElementsByClassName("multi-files");
var highlighted= angular.element(classElement);
<html lang="en" ng-app=“myDiscuss">
<head><!-- all the script files-->
</head>
<body>
<div class="thumbnail" ng-controller="TabController as tabs”>
<!-- some other div-->
<div ng-show="tabs.isSelected(1)">
<small>No of likes</small>
</div>
<section class="caption" >
<ul class="nav nav-pills">
<li ng-class="{ active:tab === 1 }" >
<a href ng-click="tabs.selectTab(1)">Helpful</a>
</li>
<li ng-class= "{ active:tab === 2 }">
<a href ng-click="tabs.selectTab(2)">Comment</a>
</li>
</ul>
<div class="panel" ng-show="tabs.isSelected(2)">
<blockquote>
<ul class="nav nav-pills">
<li ng-class="{ active:tab === 3 }" >
<a href ng-click="tabs.selectTab(3)" >Helpful</a>
</li>
<li ng-class= "{ active:tab === 4}">
<a href ng-click="tabs.selectTab(4)">Reply</a>
</li>
</ul>
<input type="text" ng-show="tabs.isSelected(4)">
</blockquote>
</div>
</section>
</div>
</body>
</html>
JavaScript File
var app = angular.module("myDiscuss", []);
app.controller("TabController", function() {
this.tab=0;
this.selectTab = function(setTab) {
this.tab= setTab;
};
this.isSelected = (function(checkTab){
return this.tab === checkTab;
});
});
When I click the "Comment" Link it open the div "panel". whereas when i click "Reply" link it doesn't open input tag.
Image with comment and helpful link
The div "panel" which open when comment link is clicked
Actually, it's working but since you are using same this.tab variable it's not working. You should take separate variable.
Take separate variable for main tabs & sub tabs or you can use another method to separate main tabs & sub tabs. Like 1.1 or 3.3 etc. There are many ways.
this.tab=0;
this.subTab = 0;
this.selectTab = function(setTab) {
this.tab= setTab;
};
this.selectSubTab = function(setTab){
this.subTab = setTab;
};
this.isSelected = (function(checkTab){
return this.tab === checkTab;
});
this.isSelectedSub = (function(checkTab){
return this.subTab === checkTab;
});
check the https://plnkr.co/edit/leTBpJUVC7giDCs9KtQX
For less confusion, I'd recommend assigning the controller to a variable:
var app = angular.module("myDiscuss", []);
app.controller("TabController", function() {
var v = this;
v.tab=0;
v.selectTab = function(setTab) {
v.tab= setTab;
};
v.isSelected = (function(checkTab){
return v.tab === checkTab;
});
});
This is because in function, this refers to the function, not the controller. By using a separate variable, you avoid the inconsistency.
Even the alias you're using, TabController as tabs, uses the same thing:
$scope.tabs = this internally.
I have a thumb-nail view of two images and I have two JSON files(named dataOne.json and dataTwo.json). When the user click on one of the images, I want to list out all the elements of the respective JSON file into a new web page. The new web page has a pill.
HTML:
<div id = "Cities" class = "neighborhood-guides">
<div class = "container" ng-controller="CityController">
<div class = "thumbnail" ng-click = "city(dataOne)">
<image src = "Images/NYC.jpg"/>
</div>
<div class = "thumbnail" ng-click = "city(dataTwo)">
<image src = "Images/LA.jpg"/>
</div>
</div>
</div>
HTML(new) :
<div class = "content" id = "content">
<div class="list-group-item">
<section class="tab" ng-controller = "TabController as tab">
<ul class="nav nav-pills">
<li ng-class="{ active: tab.isSet(1) }">
<a ng-click = "tab.setTab(1)" href>Categories</a>
</li>
<li ng-class="{ active: tab.isSet(2) }">
<a ng-click = "tab.setTab(2)" href>Interactive Guide</a>
</li>
<li ng-class="{ active: tab.isSet(3) }">
<a ng-click = "tab.setTab(3)" href>List of all places</a>
</li>
</ul>
<div ng-show = "tab.isSet(1)"></div>
<div ng-show = "tab.isSet(2)">
<blockquote>This is where I want the data</blockquote>
</div>
<div ng-show = "tab.isSet(3)">
<blockquote></blockquote>
</div>
</section>
</div>
</div>
app.js
function() {
var app = angular.module('app', []);
app.controller('CityController', function(){
$scope.city = function(param) {
$http.get(param+'.json', param).success(
function(data){
//What should I do here?
console.log(data);
}
).error();
}
});
app.controller('TabController', function(){
this.tab = 1;
this.setTab = function(newValue){
this.tab = newValue;
};
this.isSet = function(tabName){
return this.tab === tabName;
};
);
How do I get the data from the json file, through the click from page 1 and display it in the pill 2 of the new page?
you can define a service factory which holds the json data. please take a look this answer for similar question:
https://stackoverflow.com/a/21920241/4213391
I am trying to follow up a tutorial and demo that I found here http://jsfiddle.net/scyrizales/pC9dH/
As a result this is the code snippet of what I have done
<div ng-app="GridCambiable" ng-controller="GridCambiableController">
<div class="bar">
<!-- These two buttons switch the layout varaible,
which causes the correct UL to be shown. -->
<a class="list-icon" ng-class="{active: isLayout('list')}" ng-click="setLayout('list')"></a>
<a class="grid-icon" ng-class="{active: isLayout('grid')}" ng-click="setLayout('grid')"></a>
</div>
<!-- We have two layouts. We choose which one to show depending on the "layout" binding -->
<ul ng-show="isLayout('grid')" class="grid">
<!-- A view with big photos and no text -->
<li ng-repeat="p in pics">
<img ng-src="{{p.images.low_resolution.url}}" />
</li>
</ul>
<ul ng-show="isLayout('list')" class="list">
<!-- A compact view smaller photos and titles -->
<li ng-repeat="p in pics">
<img ng-src="{{p.images.thumbnail.url}}" />
<p>{{p.caption.text}}</p>
</li>
</ul>
app.controller('GridCambiableController', ['$scope', 'instagram' ,
function ($scope, instagram){
// Layout por defecto
$scope.layout = 'grid';
$scope.setLayout = function(layout){
$scope.layout = layout;
};
$scope.isLayout = function(layout){
return $scope.layout == layout;
};
When I launch the code, I get this error on my chrome console
Uncaught Error: No module: GridCambiable
I have made a plunk of my attempt
http://plnkr.co/edit/9BYKw45ZrIgVpbixRsAz?p=preview
Please why am I getting this on my console.
Thanks.
You didn't include your script.js after you include angular.min.js
In your index.html:
<!--include angular-->
<script src="script.js"></script>
add this before your controller:
var app = angular.module("GridCambiable", []);
Alternative:
angular.module("GridCambiable", []).controller('GridCambiableController', ['$scope', 'instagram' ,
function ($scope, instagram){
// Layout por defecto
$scope.layout = 'grid';
$scope.setLayout = function(layout){
$scope.layout = layout;
};
$scope.isLayout = function(layout){
return $scope.layout == layout;
};