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);
Related
I have a modal (bootstrap) where I load Objects from the Firebase Database. Now I added a ng-Click to "select" an Object.
I want to select 8 Object and "collect" them. After I collected these 8 Objects, I want to pass them to another ng-Click. When I click on the second ng-Click these 8 (selected) Objects are pushed to the Database.
Do you have any idea how to archive that? Thank you!
This is my modal:
<div class="col-md-12">
<ul class="list-group">
<li ng-repeat="team in teams" class="list-group-item">{{ team.allUserTeamName + " - " + team.allUserTeam }}
<i class="fa fa-plus-circle" aria-hidden="true" ng-init="item.isClicked = false" ng-click="selectMembers(team); item.isClicked =!item.isClicked" ng-class="{clicked : item.isClicked}"></i>
</li>
</ul>
</div>
<div class="modal-footer">
<div class="col-md-12">
<div class="row pad-team-selection-view">
<button class="btn btn-info" ng-click="createGameplanWithSelectedMembers(team)">Spielplan erstellen</button>
</div>
</div>
</div>
This is my Controller:
app.controller('modalCreateGameplanController', ['$scope', '$timeout', '$http', '$firebaseArray', '$firebaseObject', function ($scope, $timeout, $http, $firebaseObject, $firebaseArray) {
$scope.selectUsers = 'Teilnehmer';
$scope.$on('modal', function (event, args) {
var ref = firebase.database().ref("users");
var teams = $firebaseObject(ref);
teams.$loaded().then(function () {
$scope.teams = [];
angular.forEach(teams, function (key) {
$scope.teams.push({
allUserTeamName: key.firstname,
allUserTeam: key.team
});
$scope.selectMembers = function (key) {
console.log(key);
};
$scope.createGameplanWithSelectedMembers = function () {
console.log(teams);
};
});
});
});
}]);
In the view use ng-disabled and use selected length as condition to disable the button .
<div class="col-md-12">
<ul class="list-group">
<li ng-repeat="team in teams" class="list-group-item">{{ team.allUserTeamName + " - " + team.allUserTeam }}
<i class="fa fa-plus-circle" aria-hidden="true" ng-init="item.isClicked = false" ng-click="selectMembers(team); item.isClicked =!item.isClicked" ng-class="{clicked : item.isClicked}"></i>
</li>
</ul>
</div>
<div class="modal-footer">
<div class="col-md-12">
<div class="row pad-team-selection-view">
<button class="btn btn-info" ng-click="createGameplanWithSelectedMembers(team)" ng-disabled="selectCount==8">Spielplan erstellen</button>
</div>
</div>
</div>
In the controller keep a tracker for selected items $scope.selectCount
app.controller('modalCreateGameplanController', ['$scope', '$timeout', '$http', '$firebaseArray', '$firebaseObject', function ($scope, $timeout, $http, $firebaseObject, $firebaseArray) {
$scope.selectUsers = 'Teilnehmer';
$scope.$on('modal', function (event, args) {
var ref = firebase.database().ref("users");
var teams = $firebaseObject(ref);
teams.$loaded().then(function () {
$scope.selectCount=0;
$scope.teams = [];
angular.forEach(teams, function (key) {
$scope.teams.push({
allUserTeamName: key.firstname,
allUserTeam: key.team
});
$scope.selectMembers = function (key) {
$scope.selectCount=$scope.selectCount+1;
console.log(key);
};
$scope.createGameplanWithSelectedMembers = function () {
console.log(teams);
};
});
});
});
}]);
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;
Hope somebody can help me with my problem.
I am trying to order my list on specific data and this works fine when I say upfront on what it needs to be sorted.
But when I do this when I click on a button it doesn't order my list in anyway.
Hope somebody can help me with this problem.
this is my app.js code:
app.controller("ListController", function ($scope, $interval, $http, myService, OpenDataService) {
myService.async().then(function (d) {
OpenDataService.opendata = d;
$scope.openData = OpenDataService.opendata;
$scope.order = "";
});
$scope.orderOptions = ["gemeente", "locatie"];
$scope.change = function (value) {
console.log("change");
$scope.order = value;
console.log(value);
}
$scope.test = OpenWifiData;
});
And here is the html code I use:
<li ng-click="change('gemeente')"><a>locatie</a></li>
<div id="WifiSpots" ng-controller="ListController" class="col-sm-12 col-md-4 col-md-offset-2">
<div ng-repeat="item in openData | filter:searchText | orderBy: order">
<ul class="list-group">
<li class="list-group-item">
<div class="row wifiSpots" >
<div class="col-md-2">{{item.locatie}}</div>
<div class="col-md-2">{{item.gemeente}}</div>
<div clas="col-md-1">{{item.distance}}</div>
<div clas="col-md-1">{{item.duration}}</div>
<button ng-controller="MapController" ng-click="calculateAndDisplayRoute(item.objectid)" class="btn ">Selecteer</button>
</div>
</li>
</ul>
</div>
</div>
The 'order' in the ng-repeat directive is in a different scope than the one in your controller. Add a wrapper class like so:
$scope.opts = {order: ""};
Then in your change function update that instead:
$scope.opts.order = value;
In the html:
orderBy:opts.order
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 very new to angular.
i am reading a JSONP response and showing it in a page. i would like to allow users to edit parts of the text inline. i found angular-xeditable. but i cant figure out
1. how do i use it in the repeater. i have spent several hours trying to use the inline edit. it works if its not in the repeater. otherwise breaks everything.
i have this:
in my app.js:
var app = angular.module('ListApp', ['ui.bootstrap']).config(['$httpProvider', function ($httpProvider)
{
$httpProvider.defaults.useXDomain = true;
delete $httpProvider.defaults.headers.common['X-Requested-With'];
}]);;
var app11 = angular.module("app11", ["xeditable"]);
app11.run(function (editableOptions) {
editableOptions.theme = 'bs3'; // bootstrap3 theme. Can be also 'bs2', 'default'
});
app11.controller('Ctrl', function ($scope) {
$scope.user = {
name: 'awesome user'
};
});
angular.element(document).ready(function () {
angular.bootstrap(document.getElementById('list-reminders'), ['ListApp']);
angular.bootstrap(document.getElementById('xedittxt'), ['app11']);
});
in my html:
<div id="list-reminders" class="container main-frame" ng-controller="remindersController" ng-init="init()">
<div class="search-box row-fluid form-inline">
<nobr>
<label>Find</label>
<input type="text" ng-model="searchText" value="{{searchText}}" /> <input type="submit" class="submit" ng-click="getRemindersByUserId()" value="Search">
</nobr>
</div>
<div class="results-top"></div>
<div class="results-container">
<div class="row-fluid">
<div class="span1">Title</div>
<div class="span2">My Notes</div>
</div>
<ul class="item-list" style="display:none;">
<li ng-repeat="(key,item) in lists">
<div class=" row-fluid">
<div id="xedittxt" ng-controller="Ctrl" class="span2">
</div>
<div class="span2">{{item.user_notes}} </div>
</div>
</li>
</ul>
in my controller.js
app.controller("remindersController", function ($scope, $modal, $http) {
$scope.items = [];
//api
$scope.getListApi = '....URL REMOVED';
var callback = 'callback=JSON_CALLBACK';
$scope.init = function () {
//items selected from results to add to list
$scope.selectedItems = [];
var $loading = $('.loading');
var $searchOptions = $('.search-options');
var $itemList = $('.item-list');
$scope.getRemindersByUserId = function (userId) {
$itemList.hide();
$loading.show();
var getListUrl = $scope.getListApi + "1&" + callback;
console.log(getListUrl);
$http.jsonp(getListUrl).success(function (data) {
$scope.lists = data;
$loading.hide();
$itemList.show();
}).error(function (err) {
console.log("getRemindersByUserId error: " + err);
});
};
};
});