5
में कस्टम निर्देशिका में बटन पर क्लिक करके विशेष उपयोगकर्ता जेसन डेटा को कैसे कॉल करें I angular.js के लिए नया हूं। मैं जेसन डेटा को कॉल करना चाहता हूं जो एक कस्टम निर्देशिका के अंदर है और किसी विशेष उपयोगकर्ता बटन पर क्लिक करना है, मैं उस विशेष उपयोगकर्ता की जानकारी प्रदर्शित करना चाहता हूं। मैं इसे प्राप्त करने में असमर्थ हूं। मेरा कोड है।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>
बताए छात्रों के लिए आपका वाक्य रचना गलत भी आप ऐसा कार्य करने के लिए, क्योंकि यह पारित कर दिया वस्तु को बदल नहीं सकते है संदर्भ द्वारा पारित किया गया है और आप संदर्भ को संशोधित नहीं करते हैं। – jcubic
अपने डेटा के लिए 'फैक्ट्री' या 'सेवा' का उपयोग करना बेहतर नहीं है' निर्देश '। आप बेहतर समझने के लिए देख सकते हैं http://stackoverflow.com/questions/15666048/angularjs-service-vs-provider-vs-factory। –