5
Jestem nowy w angular.js. Chcę wywołać dane json, które znajdują się wewnątrz niestandardowego katalogu i kliknij konkretny przycisk użytkownika Chcę wyświetlić informacje o tym konkretnym użytkowniku. Nie udało mi się tego osiągnąć. Kolejny to mój kod.jak wywołać dane konkretnego użytkownika json, klikając przycisk w niestandardowym katalogu w angular.js
index.html
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootswatch/3.1.1/readable/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<!-- JS -->
<!-- load angular, ngRoute, ngAnimate -->
<script src="./bower_components/angular/angular.js"></script>
<script src="./bower_components/angular-route/angular-route.js"></script>
<script src="./bower_components/angular-animate/angular-animate.js"></script>
<script src="index3.js"></script>
</head>
<body>
<!--<div class="container">-->
<!--<div ng-controller="ProductController">-->
<!--<h2>{{name}}</h2>-->
<!--</div>-->
<div ng-controller="studentController">
<my-firstdirective></my-firstdirective>
</div>
</div>
</body>
</html>
index.js
var myApp=angular.module("myApp",[]);
myApp.controller("ProductController",function($scope){
$scope.name="shar";
});
var myApp=angular.module("myApp",[]);
myApp.controller("studentController",['$scope',function($scope) {
}]);
myApp.directive('myFirstdirective',function() {
return {
templateUrl: "productTemplate.html ",
replace: true,
restrict: 'E',
controller: function ($scope) {
$scope.setGrade = function (student) {
student =[
s1=
{
'grade': 'sharv',
'Email': "[email protected]",
'contact': '1234567890'
},
{
'grade': 'pooja',
'Email': "[email protected]",
'contact': '237790864322'
}
];
}
}
}
})
producttemplate.html
<div class="jumbotron">
<table class="table table-inverse">
<thead>
<tr>
<th>First Name</th>
<th>Detail</th>
</tr>
</thead>
<tbody>
<tr>
<td>sharvari</td>
<td><button class="btn btn-success" ng-click="setGrade(student)">Details</button></td>
</tr>
<tr>
<td>pooja</td>
<td><button class="btn btn-success" ng-click="setGrade(student)">Details</button></td>
</tr>
<tr>
<td>ruchi</td>
<td><button class="btn btn-success" ng-click="setGrade(student)">Details</button></td>
</tr>
</tbody>
</table>
<style>
.panel{
width:500px;
}
</style>
<div ng-show="!!student.grade">
<div class="panel panel-default">
<div class="panel-body">
Details of {{student.grade}}<br>
name:{{student.grade}}<br>
Email:{{student.Email}}<br>
contact:{{student.contact}}
</div>
</div>
</div>
</div>
składni do przydzielania uczniów jest źle też nie można zmienić obiekt przeszedł funkcjonować tak, ponieważ jest to przekazywane przez referencję, a ty zmieniasz odniesienie, a nie sam obiekt. – jcubic
Lepiej używać 'fabryki' lub' usługi' dla twoich danych, a nie dla 'dyrektywy' możesz poszukać lepszego zrozumienia http://stackoverflow.com/questions/15666048/angularjs-service-vs-provider-vs-factory. –