I am kind of new to AngularJS and is now facing with an issue. When I browse the solution and select an item from any category it updates the all the sections textboxes with the result instead of the on intended section.
If I have only one section then everything is perfectly fine but the moment I have more than one section, then everything goes for a toss. I know this is because of the $scope variable currentItem. I am not sure how I can solve this issue.
Any light thrown to solve the issue is highly appreciated. Thank you in advance.
HTML Page [default.htm]
<html ng-app="myapp" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Page</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular-route.min.js"></script>
</head>
<body>
<div ng-view>
</div>
<script src="myapp.js" type="text/javascript"></script>
</body>
</html>
JavaScript [myapp.js]
var app = angular.module('myapp', ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider
.when('/home', {
templateUrl : 'partials/Home.htm',
controller : 'HomeController'
})
.otherwise({redirectTo: '/home'});
});
app.controller('HomeController', function($scope,$sce, $http, $location, $rootScope) {
$scope.datas = [
{
"category":"First Category",
"items":[
{
"itemCode":"001",
"itemDescription":"Item 01"
},
{
"itemCode":"002",
"itemDescription":"Item 02"
}
]
},
{
"category":"Second Category",
"items":[
{
"itemCode":"004",
"itemDescription":"Item 04"
},
{
"itemCode":"005",
"itemDescription":"Item 05"
}
]
}
];
$scope.selectItem = function(parentindex, index){
$scope.currentItem = $scope.datas[parentindex].items[index];
}
});
Partial Page [partials/Home.htm]
<div ng-repeat='data in datas'>
<table>
<tr>
<td>
{{data.category}} Items
</td>
</tr>
<tr ng-repeat='item in data.items' ng-click='selectItem($parent.$index, $index)'>
<td>
{{item.itemDescription}}
</td>
</tr>
</table>
<table>
<tr>
<td>
Code:
</td>
<td>
<input ng-model='currentItem.itemCode' type="text" />
</td>
</tr>
<tr>
<td>
Description:
</td>
<td>
<input ng-model='currentItem.itemDescription' type="text" />
</td>
</tr>
</table>
</div>
Related
I need to display data from JSON response using Angularjs
When checking the response with DevTools i can see the results, but when it comes to diplay, it doesn't work
Controller :
MovieApp.controller('movieAdminCtrl', ['$http', '$scope', function($http, $scope){
$scope.movies=[];
$http.get('http://localhost:3000/movies').success(function(data) {
$scope.movies = data;
});
}]);
Response :
Display Code :
<tbody ng-repeat="movie in movies" >
<td></td>
<td >{{movie.title}}</td>
<td >{{movie.actors}}</td>
<td >{{movie.Created_date}}</td>
<td><img ng-src="{{movie.poster}}" /></td>
You need to access the data property of the response
$http.get('http://localhost:3000/movies').success(function(data) {
$scope.movies = data.data;
});
Please try this code..
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
</head>
<body ng-app="app" ng-controller="movieAdminCtrl">
<table>
<tr ng-repeat="movie in movies">
<td></td>
<td>{{movie.title}}</td>
<td>{{movie.actors}}</td>
<td>{{movie.Created_date}}</td>
<td>
<img ng-src="{{movie.poster}}" />
</td>
</tr>
</table>
<script src="../lib/angular.js"></script>
<script>
var MovieApp = angular.module('app', []);
MovieApp.controller('movieAdminCtrl', ['$http', '$scope', function ($http, $scope) {
$scope.movies = [];
$http.get('http://localhost:3000/movies').success(function (data) {
$scope.movies = data;
});
}]);
</script>
</body>
</html>
i have a problem with my code , i already make a code with mouseover but it was very slow to display per row my picture edit , so i read that mouseenter is faster ( i hope because i have normaly 2000 row),
but i have a problems , it show me all the pictures when i go to the tr,
this is my full code html
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">
<table>
<tr ng-mouseenter="mouseIn($event)" ng-mouseleave="mouseOut($event)" ng-repeat="x in records">
<td>{{x}}</td>
<td>
<div class="editNucleo" ng-show="editNucleo">
<input type="image" id="myimage" style="width:20px;" src="http://www.iconsdb.com/icons/download/green/edit-512.png" />
</div>
</td>
</tr>
</table>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.records = [
"Alfreds Futterkiste",
"Berglunds snabbköp",
"Centro comercial Moctezuma",
"Ernst Handel",
]
$scope.mouseIn = function (event) {
$scope.editNucleo = true;
}
$scope.mouseOut = function (event) {
$scope.editNucleo = false;
}
});
</script>
</body>
</html>
i need just display and hide the picture in the right row when i make the mouseenter , mouseleave
Your script dont know which specific index to show when mouse entered try this no function required
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">
<table>
<tr ng-mouseenter="editNucleo = $index" ng mouseleave="editNucleo = null" ng-repeat="x in records">
<td>{{x}}</td>
<td>
<div class="editNucleo" ng-show="editNucleo == $index">
<input type="image" id="myimage" style="width:20px;" src="http://www.iconsdb.com/icons/download/green/edit-512.png" />
</div>
</td>
</tr>
</table>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.records = [
"Alfreds Futterkiste",
"Berglunds snabbköp",
"Centro comercial Moctezuma",
"Ernst Handel",
];
$scope.editNucleo = null;
});
</script>
Hello I am learning angular 1 and I have problem at the very beggining.
I'm trying to display data with table in ng-repeat using controller. Angular in app stops working at all even {{ 2 + 2 }} on bottom of page doesn't work. I can't find the reason why.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>SZYBKI START Z BRACKETS</title>
<link rel="stylesheet" href="normalize.css">
<link rel="stylesheet" href="bootstrap.min.css">
</head>
<body ng-app="aplikacja">
<div class="container" ng-controller="kontrolerTabeliSkoczkow">
<h1 class="text-center">Klasyfikacja skoczków narciarskich</h1>
<br />
<div class="input-group">
<span class="input-group-addon">Szukaj: </span>
<input type="text" class="form-control" placeholder="np. Adam Małysz" />
</div>
<br />
<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th ng-repeat="naglowek in [
'Imię', 'Rok urodzenia', 'Narodowość'
]">{{ naglowek }}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="skoczkowie in skoczkow">
<td>{{skoczek.Name}}</td>
<td>{{skoczek.Nation}}</td>
<td>{{skoczek.rank}}</td>
</tr>
</tbody>
</table>
</div>
</div>
{{ 2+2 }}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script>
var app = angular.module('aplikacja', []);
app.contoller( 'kontrolerTabeliSkoczkow' , ['$scope', function( $scope ) {
$scope.skoczkowie = [
{
"Name": "HIRSCHER Marcel",
"Nation": "AUT",
"rank": 1
},
{
"Name": "JANSRUD Kjetil",
"Nation": "NOR",
"rank": 2
}
]
}];
</script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="bootstrap.min.js"></script>
</body>
</html>
You forgot to close the controller.
<script>
var app = angular.module('aplikacja', []);
app.contoller( 'kontrolerTabeliSkoczkow' , ['$scope', function( $scope ) {
$scope.skoczkowie = [
{
"Name": "HIRSCHER Marcel",
"Nation": "AUT",
"rank": 1
},
{
"Name": "JANSRUD Kjetil",
"Nation": "NOR",
"rank": 2
}
]
}]);
</script>
(The ')' at the very end)
Also, I would declare Jquery BEFORE angular
It's typo mistake, change
app.contoller(...)
to
app.controller(...)
and close properly:
app.controller("kontrolerTabeliSkoczkow" , ['$scope', function( $scope ) { ... }]);
see link jsfiddle
A parenthesis is missing just between the ]} and ; at the end of your controller
Furthermore, I do not recommand using this notation, just don't declare dependencies in your controller, I recommand doing it this way :
app.controller("kontrolerTabeliSkoczkow", function($scope){
/*anything you want to put in it*/
});
You don't get confused by parenthesis, brackets and stuff, just declare your dependencies in your module, not in your controller
step1: Initially while page load $scope.results is empty arrayList
step2: When I click on search button I am unbale to load the data in table
1) test.js
While page loading results is empty
myApp.controller('HomeController', ['$scope', '$http','$location', '$rootScope', 'DataService','SearchService',
function($scope, $http, $rootScope, $location, DataService,SearchService) {
$scope.results = [];
$scope.searchSubmit = function(){
$scope.dashboardflag = true;
$("#dashboard").hide();
SearchService.getSearchResults.query({searchText:$scope.searchText,
startDate:$("#startDate").val(),endDate:$("#endDate").val(),
userId:$scope.userEntity.userid,managerId:101083,
status:'Answered',threadType:'REPLY',
pageNumber:0
},function(data) {
//var data1 = data.list;
$scope.$apply(function() {
$scope.results = angular.copy(data);
});
});
$("#searchResults").show();
};
}]);
2) test.html
Search
<table id="searchObjResults" border="1">
<tr>
<th>Assignto</th>
<th>Title</th>
<th>Id</th>
<th>Status</th>
<th>Workflow</th>
<th>Assignment date</th>
</tr>
<tr ng-repeat="obj in results">
<td>{{obj.userName}}</td>
<td>{{obj.threadTitle}}</td>
<td>{{obj.threadId}}</td>
<td>{{obj.threadStatus}}</td>
<td>{{obj.threadType}}</td>
<td>{{obj.assignedDate}}</td>
</tr>
</table>
Couple of things,
first if you already posted you html, please post the full html,
where is the ng-app, and your controller?
second, if you want to show\hide elemets maybe you should concider using ng-hide and add a some var to the scope that wlil control that
https://docs.angularjs.org/api/ng/directive/ngHide
also, is the "data" returning from the sevice is an array?
please console.log the result, for more info
Here is the example. It may help you to follow. If no data found, then table will not be shown to the user.
Refer: http://plnkr.co/edit/blSWT4eowYv17UwwhcnQ?p=preview
html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="app">
<div ng-controller="MainCtrl" ng-init="init()">
<table id="searchObjResults" border="1" ng-show="results.length">
<tr>
<th>Assignto</th>
<th>Title</th>
</tr>
<tr ng-repeat="obj in results">
<td>{{obj.userName}}</td>
<td>{{obj.threadTitle}}</td>
</tr>
</table>
</div>
</body>
</html>
js
angular.module('app', [])
.controller('MainCtrl', function($scope) {
$scope.results = [];
$scope.data = [{
userName: 'username1',
threadTitle: 'threadTitle1'
}, {
userName: 'username2',
threadTitle: 'threadTitle2'
}];
$scope.init = function() {
$scope.results = angular.copy($scope.data);
}
});
What i need is when i change the value from child window textbox the reflect should appear on parent window records in a table. And here is my parent.html.
-----index.html--------
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#1.4.0-beta.6" data-semver="1.4.0-beta.6" src="https://code.angularjs.org/1.4.0-beta.6/angular.js"></script>
<link href="style.css" rel="stylesheet"/>
<script src="script.js"></script>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="PeopleCtrl">
<form method=post action='' name=f1>
<table border="1" >
<tr>
<th>Id</th>
<th>Name</th>
<th>Age</th>
<th> Edit here</th>
</tr>
<tr ng-repeat="person in people">
<td><span id="d" name='p_name'>{{person.id}}</span></td>
<td><span id="c" name='q_name'>{{person.name}}</span></td>
<td><span id="e" name='r_name'>{{person.age}}</span></td>
<td>Edit</td>
</tr>
</table>
</form>
</div>
</div>
<script>
var myApp=angular.module('myApp', []);
myApp.controller('PeopleCtrl', function($scope,$window) {
$scope.people = ([
{
id: 1,
name: "Peter",
age: 21},
{
id: 2,
name: "David",
age: 20},
{
id: 3,
name: "Anil",
age: 22}
])
$scope.foo = function() {
$window.open('index1.html');
};
});
</script>
And here is my child window:
------index1.html-------
<!DOCTYPE html>
<head>
<script data-require="angular.js#1.4.0-beta.6" data-semver="1.4.0-beta.6" src="https://code.angularjs.org/1.4.0-beta.6/angular.js"></script>
<script>
function post_value(){
opener.document.f1.p_name.value = document.frm.c_name.value;
opener.document.f1.q_name.value = document.frm.d_name.value;
opener.document.f1.r_name.value = document.frm.e_name.value;
self.close();
}
</script>
<title>(Type a title for your page here)</title>
</head>
<body ng-app="mainApp" >
<div ng-controller='childController'>
<form name="frm" method=post action=''>
<table border="0">
<tr><td>Enter id:</td><td><input id="d" type="text" name="c_name" ></td></tr>
<tr><td>Enter name:</td><td><input id="c" type="text" name="d_name" ></td></tr>
<tr><td>Enter age:</td><td><input id="e" type="text" name="e_name" ></td></tr>
<tr><td><button onclick="post_value();">Save</button></td></tr>
</table>
</form>
</div>
</body>
</html>
And here is my plunker: http://plnkr.co/edit/qF2zvp0VYY9wMvWzt3XK?p=preview
You shouldn't open details in other window. Then you can't persist data in your app because there is no way to communicate between two windows.
I don't think so you should make this thing this complicated as you can make you app as SPA (Single Page Application), For that you need to use ng-route which will dynamically load the pages on basis of url changes.
Using below html
<div ng-view></div>
Then you need write configuration for you app, when to load which template with which controller
Config
var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider
.when('/people', {
templateUrl: 'people.html',
controller: 'PeopleCtrl'
})
.when('/people/:id', {
templateUrl: 'details.html',
controller: 'detailsCtrl'
})
.otherwise({
redirectTo: '/people'
});
}
]);
Working Plunkr here