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>
Related
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>
My code works only when my JSON is not nested. When there is no "," between data and I use only one block of JSON it works.
My Angular:
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<table border="1">
<tr ng-repeat="thing in info" ng-if="thing.color!=null">
<td>{{thing.color}}</td>
<td>{{thing.category}}</td>
<td>{{thing.type}}</td>
</tr>
<tr ng-repeat="thing in info" ng-if="thing.detail!=null">
<td>{{thing.detail}}</td>
<td>{{thing.item}}</td>
<td>{{thing.value}}</td>
</tr>
</table>
<button class="button" ng-click="click()">Button 1</button>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$scope.click = function() {
$http.get("json.js").then(function (response) {
$scope.info=response;
});
};
});
</script>
</div>
</body>
</html>
And my JSON
[
{
"color": "black",
"category": "hue",
"type": "primary"
},
{
"detail": "white",
"item": "red",
"value": "silver"
}
]
Thanks
Please use $scope.info=response.data; instead of $scope.info=response;.
For h1 tag nested ng-repeat is not working fine.
I know that we can access the parent data in nested ng-repeat using $parent. But this is not working for me.
If I replace h1 with div then this is working fine.
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.records = [
"Alfreds Futterkiste",
"Ernst Handel",
]
$scope.records2 = [
"Alfreds Futterkiste2",
"Ernst Handel2",
]
$scope.records3 = [
"Alfreds Futterkiste3",
"Ernst Handel3",
]
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<h1 ng-repeat="x in records">
<h1 ng-repeat="y in records2">
<span>{{$parent.x}}</span>
<h1 ng-repeat="z in records3"></h1>
</h1>
</h1>
<div>
H1's cannot be nested. Angular is producing it right, but browser is closing tags too soon. Here is plunker without H1s and nested.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
var vm = this;
vm.records = [
"Alfreds Futterkiste",
"Ernst Handel",
]
vm.records2 = [
"Alfreds Futterkiste2",
"Ernst Handel2",
]
vm.records3 = [
"Alfreds Futterkiste3",
"Ernst Handel3",
]
});
</script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl as vm">
<div ng-repeat="x in vm.records">
- <span>{{x}}</span>
<div ng-repeat="y in vm.records2">
--<span>{{y}}</span>
<div ng-repeat="z in vm.records3">
--- <span>{{z}}</span>
</div>
</div>
</div>
</div>
</body>
</html>
https://plnkr.co/edit/4f4Ef0V2YGCkZkv49bHl?p=info
angular will render different ng-repeat on each H1 tag.
so as per your data dom render like this
<h1 ng-repeat="x in records" class="ng-binding ng-scope"></h1>
<h1 ng-repeat="x in records" class="ng-binding ng-scope"></h1>
<h1 ng-repeat="y in records2" class="ng-scope"><span class="ng-binding"></span></h1>
<h1 ng-repeat="y in records2" class="ng-scope"><span class="ng-binding"></span></h1>
<h1 ng-repeat="z in records3" class="ng-scope"></h1>
<h1 ng-repeat="z in records3" class="ng-scope"></h1>
so we can not access siblings scope.
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
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