Field not updating in index.html after retrieving data from server

Field not updating in index.html after retrieving data from server - javascript

I have created an app which communicates with the news api server and generates news .All goes well but it does not updates the content in index.html .
I am talking about the tab no. 2 only (bloomberg tab)
Code :
index.html
<html>
<head>
<link rel = "stylesheet" type = "text/css" href = "bower_components/bootstrap/dist/css/bootstrap.min.css">
<link rel = "stylesheet" type = "text/css" href = "bower_components/bootstrap/dist/css/bootstrap-theme.min.css">
<style>
.row-content {
min-height:200px;
padding-top:40px;
padding-bottom:40px;
}
.navbar{
background:blue;
}
.navbar .container #mynav .nav a {
color: navajowhite;
}
.navbar .container #mynav .nav a:hover {
background:darkblue;
color:white;
}
.navbar .container .navbar-header .navbar-brand{
color:navajowhite;
}
.navbar .container .navbar-header .navbar-brand:hover{
color:white;
background:darkblue;
}
.active{
color:white;
background:darkblue;
}
</style>
</head>
<body ng-app = "mainApp">
<nav class = "navbar navbar-inverse" ng-controller = "newsController">
<div class = 'container'>
<div class = "navbar-header">
<button type = "button" class = "navbar-toggle" data-toggle = "collapse" data-target = "#mynav">
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
</button>
<a class = "navbar-brand" href = "#">Latest News</a>
</div>
<div id = "mynav">
<ul class = "nav navbar-nav">
<li><a ng-class = "{'active':active == 0}"
ng-click = "activeChecker(0); change('bbc-news');">BBC news</a></li>
<li><a ng-click = "main('bloomberg',1);"
ng-class = "{'active':active == 1}">Bloomberg</a></li>
<li><a ng-class = "{'active':active == 2}"
ng-click = "activeChecker(2); change('cnbc');">CNBC</a></li>
<li><a ng-class = "{'active':active == 3}"
ng-click = "activeChecker(3); change('fortune');">Fortune</a></li>
<li><a ng-class = "{'active':active == 4}"
ng-click = "activeChecker(4); change('google-news');">Google</a></li>
<li><a ng-class = "{'active':active == 5}"
ng-click = "activeChecker(5); change('mashable');">Mashable</a></li>
<li><a ng-class = "{'active':active == 6}"
ng-click = "activeChecker(6); change('recode');">ReCode</a></li>
<li><a ng-class = "{'active':active == 7}"
ng-click = "activeChecker(7); change('the-verge');">The Verge</a></li>
</ul>
</div>
</div>
</nav>
<div class = "container" ng-controller = "newsController">
<div class = "row">
<ul class = "media-list">
<li class = "media" ng-repeat = "x in result.articles">
<div class = "media-body">
<h2 class = "media-title">{{x.title}}</h2>
<p>x.description</p>
<footer>
<p>By --{{x.author}} on {{x.publishedAt | date}}</p>
</footer>
</div>
</li>
</ul>
</div>
</div>
<script src = "bower_components/jquery/dist/jquery.min.js"></script>
<script src = "bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src = "bower_components/angular/angular.min.js"></script>
<script src = "scripts/app.js"></script>
<script src = "scripts/services.js"></script>
<script src = "scripts/controllers.js"></script>
</body>
</html>
Controllers.js
app.controller('newsController',['$http','newsService','$scope',function($http,newsService,$scope){
$scope.news = 'bbc-news';
$scope.message = "Loading ...";
$scope.change = function(index){
$scope.news = index;
console.log($scope.news);
}
$scope.active = 0;
$scope.result = {};
$scope.run = function (){
newsService.getNews($scope.news)
.then(function(response){
$scope.result = response.data;
console.log('Success');
},
function(response){
$scope.result = {};
$scope.message = "Error : " + response.status + "\n" + response.statusText;
console.log('Error')
});
}
$scope.run();
$scope.activeChecker = function(index){
$scope.active = index;
}
$scope.main = function(index,index1){
$scope.change(index);
$scope.activeChecker(index1);
$scope.run();
}
}])
Services.js
app.service('newsService',['$http',function($http){
this.getNews = function(index){
return $http.get(' https://newsapi.org/v1/articles?source=' + index + '&sortBy=top&apiKey=485dfa3cd11b455aba4748da6d6f2e77')
}
}]);

Related

AngularJS two different actions in ng-submit

I'm new to AngularJS, currently I am trying to create a spa for tracking expenses as a simple project but I have some problems with my code.
I managed to do the most of the function but I got stuck at the update function, I want to be able to update the data without creating another button, instead using the same submit button which is used to add new data
Here is the html and js code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Expenses Tracker</title>
<link rel="stylesheet" href="bootstrap.min.css">
<link href="style.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<span class="navbar-brand"><img src="logo.png" class="brand" height="40" />
Simple Expenses App Tracker</span>
</div>
</div>
</nav>
<div class="main" ng-app="myList" ng-controller="myListController">
<img src="logo.png" class="logo">
<form ng-submit="newItem()" class="form">
<input required type="number" placeholder="Amount" ng-model="amount">
<input required type="text" placeholder="Description" ng-model="description">
<input type="submit" value="Submit" class="btn btn-success">
</form>
<ul>
<li ng-repeat="item in items">
<span class="pull-left"> {{item.amount}} den.</span> {{item.description}}
<span class="buttons">
<input type="button" ng-click="editItem($index)" value="Edit" class="btn btn-primary" >
<input type="button" ng-click="deleteItem($index)" value="Delete" class="btn btn-danger">
</span>
</li>
<br>
<li><span class="total">{{totalPrice()}} den.</span> <span class="expense"> Total Expenses</span></li>
</ul>
</div>
<script src="bootstrap.min.js"></script>
<script src="angular.min.js"></script>
<script src="angular-route.min.js"></script>
<script src="app.js"></script>
</body>
</html>
var myApp = angular.module("myList", []);
myApp.controller("myListController", function($scope) {
$scope.items = [];
$scope.newItem = function() {
$scope.items.push({description:$scope.description, amount: $scope.amount});
$scope.description = '';
$scope.amount = 0
};
$scope.deleteItem = function(index) {
$scope.items.splice(index, 1);
}
$scope.totalPrice = function() {
var total = 0;
for(count=0; count<$scope.items.length;count++){
total += $scope.items[count].amount;
}
return total;
};
$scope.editItem = function(index) {
$scope.amount = $scope.items[index].amount;
$scope.description = $scope.items[index].description;
};
});

You could have two scope variables to keep track if in edit mode and to keep track of the index that is being edited, and in the newItem() can have an if else statement based on edit mode or not
For example you could do something like
var myApp = angular.module("myList", []);
myApp.controller("myListController", function($scope) {
$scope.items = [];
$scope.isEdit = false; // initialize
$scope.editingIndex = null; //initialize
$scope.newItem = function() {
if(!$scope.isEdit){ //if not in edit mode -> add new
$scope.items.push({description:$scope.description, amount: $scope.amount});
}
else{ //in edit mode -> edit the object
$scope.items[$scope.editingIndex] = { //replace with new values
description:$scope.description, amount: $scope.amount
}
$scope.isEdit = false; //setting back to false
$scope.editingIndex = null;
}
$scope.description = '';
$scope.amount = 0
};
$scope.deleteItem = function(index) {
$scope.items.splice(index, 1);
}
$scope.totalPrice = function() {
var total = 0;
for(count=0; count<$scope.items.length;count++){
total += $scope.items[count].amount;
}
return total;
};
$scope.editItem = function(index) {
$scope.isEdit = true; //setting edit mode true
$scope.editingIndex = index; //setting the index to edit
$scope.amount = $scope.items[index].amount;
$scope.description = $scope.items[index].description;
};
});
demo

Angular add value from dropdown into list and from list into dropdown

I have problems with the functionality of my code when I add persons from dropdow into the list or from the list back to the dropdown then alot of bugs occurs e.x the same person get added 2 times or when I delete one person then an otherone gets deleted instead, and I'm not sure where the bug/mistake is, maybe you can help me out.
Fiddle
HTML:
<div ng-app="miniapp">
<div ng-controller="Ctrl">
<div ng-init="getPersons()" class="dropdown">
<select name="selectedPerson" ng-model="selectedPerson">
<option ng-repeat="Person in Persons">{{Person}}</option>
</select>
<button ng-click="addPerson()">
<div>
<i class="fa fa-plus"></i>
</div>
</button>
</div>
<div class="block-form ng-scope" ng-init="initSavedPersons()">
<ul class="pers-ul">
<li class="pers-li" ng-repeat="person in persons | orderBy:'name'">
<span class="fa" ng-click="getDeletedPerson($event); deletePerson($index)"></span>
<span>{{person.name}}</span>
</li>
</ul>
</div>
</div>
Controller:
var $scope;
var app = angular.module("myapp", []);
app.controller("Ctrl", function($scope) {
$scope.persons = [];
$scope.Persons = [];
var deletedPers = "";
$scope.getPersons = function() {
$scope.Persons = ["Tom", "Jerry"];
};
$scope.initSavedPersons = function() {
var initPers = ["Max", "Alfi"];
for (var i = 0; i < initPers.length; i++) {
$scope.persons.push({ name: initPers[i] });
}
};
$scope.addPerson = function() {
var index = 0;
$scope.persons.push({ name: $scope.selectedPerson });
for (var i = 0; i < $scope.Persons.length; i++) {
if ($scope.Persons[i] == $scope.selectedPersons) {
index = i;
}
}
console.log(index);
$scope.Persons.splice(index, 1);
$scope.Persons.sort();
};
$scope.getDeletedPerson = function(obj) {
deletedPers = obj.currentTarget.nextElementSibling.innerHTML;
};
$scope.deletePerson = function(index) {
$scope.persons.splice(index, 1);
$scope.Persons.push(deletedPers);
};
});

Here's your code without external libraries and bug fixes. I have commented before the changes.
var $scope;
var app = angular.module("myapp", []);
app.controller("Ctrl", function($scope) {
// changed the variable names so they are easy to identify.
$scope.addedPersons = [];
$scope.dropDownPersons = [];
// added it outside the function initSavedPersons
$scope.initPers = ["Max", "Alfi"];
$scope.getPersons = function() {
$scope.dropDownPersons = ["Tom", "Jerry"];
};
$scope.initSavedPersons = function() {
// used map function to generate array
$scope.addedPersons = $scope.initPers.map(function(item){
return { name: item };
});
};
$scope.addPerson = function() {
$scope.addedPersons.push({ name: $scope.selectedPerson });
// use findIndex function
var index = $scope.dropDownPersons.findIndex(function(item) {
return item == $scope.selectedPerson;
});
$scope.dropDownPersons.splice(index, 1);
$scope.dropDownPersons.sort();
};
// deleted unnecessary function getDeletedPerson
// passed the deleting object to the function
$scope.deletePerson = function(deletingPerson) {
// used findIndex again
var index = $scope.addedPersons.findIndex(function(item) {
return item.name == deletingPerson.name;
});
// add to dropdown
$scope.dropDownPersons.push(deletingPerson.name);
$scope.addedPersons.splice(index, 1);
};
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page 1</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
</head>
<body>
<div ng-app="myapp">
<div ng-controller="Ctrl">
<div ng-init="getPersons()" class="dropdown">
<select name="selectedPerson" ng-model="selectedPerson">
<option ng-repeat="dropDownPerson in dropDownPersons">{{dropDownPerson}}</option>
</select>
<button ng-click="addPerson()">
<div>
<i class="fa fa-plus"></i>
</div>
</button>
</div>
<div class="block-form ng-scope" ng-init="initSavedPersons()">
<ul class="pers-ul">
<li class="pers-li" ng-repeat="addedPerson in addedPersons | orderBy:'name'">
<span class="fa" ng-click="deletePerson(addedPerson)"></span>
<span>{{addedPerson.name}}</span>
</li>
</ul>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.2/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
</body>
</html>

I used lodash to manipulate arrays. Please check the code below;
var $scope;
var app = angular.module('myapp', []).constant('_', window._);
function Ctrl($scope) {
$scope.persons = [];
$scope.Persons = [];
var deletedPers = "";
$scope.getPersons = function () {
$scope.Persons = ["Tom", "Jerry"];
}
$scope.initSavedPersons = function () {
var initPers = ["Max", "Alfi"];
initPers.sort();
for (var i = 0; i < initPers.length; i++) {
$scope.persons.push({ 'name': initPers[i] });
}
}
$scope.addPerson = function () {
var index = 0;
$scope.persons.push({ 'name': $scope.selectedPerson });
var sortedArray = _.sortBy($scope.persons, ['name']);
$scope.persons.length = 0;
$scope.persons.push.apply($scope.persons, sortedArray);
_.remove($scope.Persons, function(item) { return item == $scope.selectedPerson});
}
$scope.deletePerson = function (index) {
console.log(index);
var deletedPerson = Object.assign({}, $scope.persons[index]);
_.remove($scope.persons, { 'name' : deletedPerson.name});
$scope.Persons.push(deletedPerson.name);
$scope.Persons.sort();
}
}
.pers-ul {
list-style: none;
padding-left: 0;
margin-top: 25px;
}
.pers-li {
border: 1px solid black;
display: inline-block;
padding: 5px 10px;
margin-right: 5px;
margin-bottom: 5px;
text-transform: capitalize;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash#4.17.10/lodash.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<div ng-app="myapp">
<div ng-controller="Ctrl">
<div ng-init="getPersons()" class="dropdown">
<select name="selectedPerson" ng-model="selectedPerson">
<option ng-repeat="Person in Persons">{{Person}}</option>
</select>
<button ng-click="addPerson()">
<div>
<i class="fa fa-plus"></i>
</div>
</button>
</div>
<div class="block-form ng-scope" ng-init="initSavedPersons()">
<ul class="pers-ul">
<li class="pers-li" ng-repeat="person in persons">
<span class="fa" ng-click="deletePerson($index)"></span>
<span>{{person.name}}</span>
</li>
</ul>
</div>
</div>
</div>

Angular1.5.8, the component does not work

<div ng-app="myApp" ng-controller="controller" class="cell-list-box">
<div >
<button ng-click="changeArrayFun(1)">array1Button</button>
<button ng-click="changeArrayFun(2)">array2Button</button>
</div>
<ul class="cell_list_ul">
<li ng-repeat="item in show_array" class="cell_list">
<div class="course_cell">
<div class="img_box">
<a ng-if="item.course != 'course'&&item.coursetype ==1 "
target="_blank">
<div style="background-color: yellow; width: 20px; height: 20px" ></div>
</a>
<a ng-if="item.works_oldid"
target="_blank">
<div style="background-color: red; width: 20px; height: 20px" ></div>
</a>
</div>
</div>
</li>
</ul>
</div>
<script src="../angular.js"></script>
<script>
var ngmodule = angular.module('myApp',[]);
ngmodule.controller('controller', ['$scope', function ($scope) {
var array1 = [
{
"type":"coursewarp",
"coursetype":1,
},
];
var array2 = [
{
"ID":3194892,
"courseid":"0",
"taskid":34,
"works_oldid":"585be116e9c7a87881571958",
}
];
$scope.changeArrayFun = function (number) {
if(number === 1){
$scope.show_array = array1;
} else {
$scope.show_array = array2;
}
}
}]);
</script>
If I write all the code in my HTML. When I click the Button1, the yellow box will show. When I click the Button2, the red box will show. The code work well.I use the Angular component to write a "cell" component. IF I insert the cell code into the "cell" component, the code does not work.
The component templateUrl :
<div class="course_cell">
<div class="img_box">
<a ng-if="item.course != 'course'&&item.coursetype ==1 "
href="{{root_path}}/libs/v1/column/column.html?wrap_id={{item.wrap_id}}"
target="_blank">
<div style="background-color: yellow; width: 20px; height: 20px" ></div>
</a>
<a ng-if="item.works_oldid"
target="_blank">
<div style="background-color: red; width: 20px; height: 20px" ></div>
</a>
</div>
</div>
my component js ( test_cell.js ) :
function courseCellFactoryFun( app_name, root_path,api_set ) {
function courseCellComponentFun() {
var ctrl = this;
console.log(ctrl.cellData);
}
angular.module(app_name).component('courseCell', {
templateUrl:root_path + '/test_cell.html',
controller:courseCellComponentFun,
bindings:{
cellData:'='
}
})
}
The body will change :
<ul class="cell_list_ul">
<li ng-repeat="item in show_array" class="cell_list">
<course-cell cell-data="item"></course-cell>
</li>
</ul>
I add the code below at the end of the body.
<script src="./testCell/test_cell.js"></script>
<script>
courseCellFactoryFun('myApp','./testCell');
</script>
testCell is my component folder.
Then I run the demo, when I click the button, the colorBox does not show.

The default naming of a controller in a component in Angular 1.5+ is '$ctrl' so you must prefix this when accessing data and functions from your template e.g. :
<div class="course_cell">
<div class="img_box">
<a ng-if="$ctrl.item.course != 'course' && $ctrl.item.coursetype ==1 "
...

Twitter Bootstrap onclick not working

QUESTION BELOW
I'm currently making a responsive one-page website with Bootstrap 3.
There is a navbar at the top, and when there is a click on it, it should change how the navbar at the bottom looks like. Then when someone click's on the navbar at the bottom, it would change how the jumbotron in the middle looks like. I have tried many things, but nothing is working. Help would be much appreciated. My Current Code is below.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Pakistan Project</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<button id="demoUp" onclick="demo()">Demographics</button>
<button id="geoUp" onclick="geo()">Geography</button>
<button id="statsUp" onclick="stats()">Statistics</button>
<script>
function demo() {
document.getElementById('lowerTitle').innerHTML = "Demographics";
document.getElementById("loweritem1text").innerHTML = 'a';
document.getElementById("loweritem2text").innerHTML = ;
document.getElementById("loweritem3text").innerHTML = 'b';
document.getElementById("loweritem4text").innerHTML = 'c';
document.getElementById("loweritem5text").innerHTML = ;
document.getElementById("loweritem6text").innerHTML = ;
document.getElementById("loweritem7text").innerHTML = ;
document.getElementById("loweritem8text").innerHTML = ;
document.getElementById("loweritem9text").innerHTML = ;
document.getElementById("loweritem1text").onclick = function() { document.getElementById('jumboInfo').innerHTML = ; document.getElementById("jumboHeader").innerHTML = document.getElementById("loweritem1text").innerHTML}
document.getElementById("loweritem2text").onclick = function() { document.getElementById('jumboInfo').innerHTML = ; document.getElementById("jumboHeader").innerHTML = document.getElementById("loweritem2text").innerHTML}
document.getElementById("loweritem3text").onclick = function() { document.getElementById('jumboInfo').innerHTML = ; document.getElementById("jumboHeader").innerHTML = document.getElementById("loweritem3text").innerHTML}
document.getElementById("loweritem4text").onclick = function() { document.getElementById('jumboInfo').innerHTML = ; document.getElementById("jumboHeader").innerHTML = document.getElementById("loweritem4text").innerHTML}
document.getElementById("loweritem5text").onclick = function() { document.getElementById('jumboInfo').innerHTML = ; document.getElementById("jumboHeader").innerHTML = document.getElementById("loweritem5text").innerHTML}
document.getElementById("loweritem6text").onclick = function() { document.getElementById('jumboInfo').innerHTML = ; document.getElementById("jumboHeader").innerHTML = document.getElementById("loweritem6text").innerHTML}
document.getElementById("loweritem7text").onclick = function() { document.getElementById('jumboInfo').innerHTML = ; document.getElementById("jumboHeader").innerHTML = document.getElementById("loweritem7text").innerHTML}
document.getElementById("loweritem8text").onclick = function() { document.getElementById('jumboInfo').innerHTML = ; document.getElementById("jumboHeader").innerHTML = document.getElementById("loweritem8text").innerHTML}
document.getElementById("loweritem9text").onclick = function() { document.getElementById('jumboInfo').innerHTML = ; document.getElementById("jumboHeader").innerHTML = document.getElementById("loweritem9text").innerHTML}
}
function geo() {
document.getElementById('lowerTitle').innerHTML = 'Geography'
document.getElementById("loweritem1text").innerHTML =
document.getElementById("loweritem2text").innerHTML =
document.getElementById("loweritem3text").innerHTML =
document.getElementById("loweritem4text").innerHTML =
document.getElementById("loweritem5text").innerHTML =
document.getElementById("loweritem6text").innerHTML =
document.getElementById("loweritem7text").innerHTML =
document.getElementById("loweritem8text").innerHTML =
document.getElementById("loweritem9text").innerHTML =
document.getElementById("loweritem1text").onclick = function() { document.getElementById('jumboInfo').innerHTML = ; document.getElementById("jumboHeader").innerHTML = document.getElementById("loweritem1text").innerHTML}
document.getElementById("loweritem2text").onclick = function() { document.getElementById('jumboInfo').innerHTML = ; document.getElementById("jumboHeader").innerHTML = document.getElementById("loweritem2text").innerHTML}
document.getElementById("loweritem3text").onclick = function() { document.getElementById('jumboInfo').innerHTML = ; document.getElementById("jumboHeader").innerHTML = document.getElementById("loweritem3text").innerHTML}
document.getElementById("loweritem4text").onclick = function() { document.getElementById('jumboInfo').innerHTML = ; document.getElementById("jumboHeader").innerHTML = document.getElementById("loweritem4text").innerHTML}
document.getElementById("loweritem5text").onclick = function() { document.getElementById('jumboInfo').innerHTML = ; document.getElementById("jumboHeader").innerHTML = document.getElementById("loweritem5text").innerHTML}
document.getElementById("loweritem6text").onclick = function() { document.getElementById('jumboInfo').innerHTML = ; document.getElementById("jumboHeader").innerHTML = document.getElementById("loweritem6text").innerHTML}
document.getElementById("loweritem7text").onclick = function() { document.getElementById('jumboInfo').innerHTML = ; document.getElementById("jumboHeader").innerHTML = document.getElementById("loweritem7text").innerHTML}
document.getElementById("loweritem8text").onclick = function() { document.getElementById('jumboInfo').innerHTML = ; document.getElementById("jumboHeader").innerHTML = document.getElementById("loweritem8text").innerHTML}
document.getElementById("loweritem9text").onclick = function() { document.getElementById('jumboInfo').innerHTML = ; document.getElementById("jumboHeader").innerHTML = document.getElementById("loweritem9text").innerHTML}
}
function stats() {
document.getElementById('lowerTitle').innerHTML = 'Statistics';
document.getElementById("loweritem1text").innerHTML = 'a';
document.getElementById("loweritem2text").innerHTML = 'b';
document.getElementById("loweritem3text").innerHTML = 'c';
document.getElementById("loweritem4text").innerHTML = 'd';
document.getElementById("loweritem5text").innerHTML = 'f';
document.getElementById("loweritem6text").innerHTML = 'f';
document.getElementById("loweritem7text").innerHTML = 'd';
document.getElementById("loweritem8text").innerHTML = 'd';
document.getElementById("loweritem9text").innerHTML = 'e';
document.getElementById("loweritem1text").onclick = function() { document.getElementById('jumboInfo').innerHTML = ;
document.getElementById("jumboHeader").innerHTML = document.getElementById("loweritem1text").innerHTML}
document.getElementById("loweritem2text").onclick = function() { document.getElementById('jumboInfo').innerHTML = ;
document.getElementById("jumboHeader").innerHTML = document.getElementById("loweritem2text").innerHTML}
document.getElementById("loweritem3text").onclick = function() { document.getElementById('jumboInfo').innerHTML = ;
document.getElementById("jumboHeader").innerHTML = document.getElementById("loweritem3text").innerHTML}
document.getElementById("loweritem4text").onclick = function() { document.getElementById('jumboInfo').innerHTML = ;
document.getElementById("jumboHeader").innerHTML = document.getElementById("loweritem4text").innerHTML}
document.getElementById("loweritem5text").onclick = function() { document.getElementById('jumboInfo').innerHTML = ;
document.getElementById("jumboHeader").innerHTML = document.getElementById("loweritem7text").innerHTML}
document.getElementById("loweritem6text").onclick = function() { document.getElementById('jumboInfo').innerHTML = ;
document.getElementById("jumboHeader").innerHTML = document.getElementById("loweritem6text").innerHTML}
document.getElementById("loweritem7text").onclick = function() { document.getElementById('jumboInfo').innerHTML = ;
document.getElementById("jumboHeader").innerHTML = document.getElementById("loweritem7text").innerHTML}
document.getElementById("loweritem8text").onclick = function() { document.getElementById('jumboInfo').innerHTML = ;
document.getElementById("jumboHeader").innerHTML = document.getElementById("loweritem8text").innerHTML}
document.getElementById("loweritem9text").onclick = function() { document.getElementById('jumboInfo').innerHTML = ;
document.getElementById("jumboHeader").innerHTML = document.getElementById("loweritem9text").innerHTML}
}
</script>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<nav class="navbar navbar-default navbar-fixed-bottom">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a id="lowerTitle" class="navbar-brand" href="#"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li id="loweritem1"></li>
<li id="loweritem2"></li>
<li id="loweritem3"></li>
<li id="loweritem4"></li>
<li id="loweritem5"></li>
<li id="loweritem6"></li>
<li id="loweritem7"></li>
<li id="loweritem8"></li>
<li id="loweritem9"></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="container-fluid">
<div class="jumbotron">
<h1 id="jumboHeader"></h1>
<p id="jumboInfo"></p>
</div>
</div>
</body>
</html>

Since you're already using jQuery, I suggest you use the jQuery shell for event handling. This way you won't disrupt what Bootstrap is already doing.
instead of using the onclick attribute here
<button id="demoUp" onclick="demo()">Demographics</button>
<button id="geoUp" onclick="geo()">Geography</button>
<button id="statsUp" onclick="stats()">Statistics</button>
add eventhandlers like this:
$('#demoUp').on('click', demo);
$('#geoUp').on('click', geo);
$('#statsUp').on('click', stats);

ng-show ng-hide in ng-repeat how to click/trigger for each wrapped block

How to click to hide/show divs just those divs/classes which are wrapped in li , now if I click the first item, both items become to show. Is there a way like jQuery to just check this in Angular ?
Online sample: http://jsfiddle.net/qp0x1zcc/
<div ng-app="editer" ng-controller="myCtrl" class="container">
<ul ng-repeat="item in items">
<li ng-click="show = !show" ng-init='show = false'>
<span ng-hide="show">{{item.name}}</span>
<form ng-show="show">
<input ng-model="item.name">
</form>
</li>
<li ng-click="show = !show">
<span ng-hide="show">{{item.d}}</span>
<form ng-show="show">
<input ng-model="item.d">
</form>
</li>
</ul>
</div>

try like this. simple and clear.
var editer = angular.module('editer', []);
function myCtrl($scope) {
$scope.index = -1;
$scope.index2 = -1;
$scope.items = [{
name: "item #1",
d: "names 1"
}, {
name: "item #2",
d: "names 2"
}, {
name: "item #3",
d: "names 3"
}];
$scope.setIndex = function(item){
$scope.index = $scope.items.indexOf(item);
$scope.index2 = -1;
}
$scope.setIndex2 = function(item){
$scope.index = -1;
$scope.index2 = $scope.items.indexOf(item);
}
$scope.clearIndex = function(){
$scope.index = -1;
$scope.index2 = -1;
}
}
.container {
margin-top: 10px;
font-family: arial;
}
.container header {
padding-bottom: 20px;
border-bottom: 1px solid black;
}
ul,
input,
.container {
padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="editer" ng-controller="myCtrl" class="container">
<ul ng-repeat="item in items">
<li ng-click="setIndex(item)" ng-dblClick = "clearIndex()">
<span ng-show="index != $index">{{item.name}}</span>
<form ng-show="index == $index">
<input ng-model="item.name">
</form>
</li>
<li ng-click="setIndex2(item)" ng-dblClick = "clearIndex()">
<span ng-show="index2 != $index">{{item.d}}</span>
<form ng-show="index2 == $index">
<input ng-model="item.d">
</form>
</li>
</ul>
</div>

Develop Reference

JavaScript is the programming language of the Web.

Field not updating in index.html after retrieving data from server - javascript

Related

AngularJS two different actions in ng-submit

Angular add value from dropdown into list and from list into dropdown

Angular1.5.8, the component does not work

Twitter Bootstrap onclick not working

ng-show ng-hide in ng-repeat how to click/trigger for each wrapped block

Categories

Resources