使用搜索输入使用AngularJS从json文件获取详细信息
我的目标：使用搜索输入使用AngularJS从json文件获取详细信息,angularjs,Angularjs,我的目标： 我想在输入成员id时搜索成员详细信息。 我现在还不知道什么 我的视图已经准备好了。我已经创建了一个名为myService的服务，它使用$http 从members.json文件获取数据的服务。 我的问题？ 我得到的不是搜索到的特定id的详细信息，而是 所有成员的姓名 你想问什么？ 谁可以使用其id仅获取被搜索成员的详细信息 This is my view [1]: https://i.stack.imgur.com/PQ0BP.jpg This is my code
我想在输入成员id时搜索成员详细信息。
我现在还不知道什么
我的视图已经准备好了。我已经创建了一个名为myService的服务，它使用$http 从members.json文件获取数据的服务。
我的问题？
我得到的不是搜索到的特定id的详细信息，而是 所有成员的姓名
你想问什么？
谁可以使用其id仅获取被搜索成员的详细信息
This is my view
[1]: https://i.stack.imgur.com/PQ0BP.jpg
This is my code
[1]: https://i.stack.imgur.com/Q9tZp.jpg
This is my json file
{
"member":[
{ "Id":"1",
"Name":"Amit Singh",
"Dateofjoin":"21-03-2003",
"Number":"934234334"
},{
"Id":"2",
"Name":"Mohamad Aamir",
"Dateofjoin":"21-03-2012",
"Number":"934343434"
}
]
}
<body ng-app="myApp" ng-controller="ctrl">
<div>
<form class="form-horizontal">
<h2>Search for members.</h2>
<input type="text" name="" class='form-control' placeholder="Member ID"
ng-model="searchId"/><br>
<button class="btn btn-primary" ng-click="doSearch()">Search</button>
</form>
<div>
<p ng-repeat="x in data">
{{x.Name}}
</p>
</div>
</div>
</body>
<script type="text/javascript">
var app = angular.module("myApp",[]);
app.controller('ctrl',
['$scope','myService','$log',function($scope,myService,$log){
$scope.doSearch = function(){
myService.getData($scope.searchId).then(function(data){
$scope.data = data;
$log.info($scope.data);
});
};
}])
app.service('myService', ['$http','$log', function($http,$log){
this.getData = function(memberId){
return $http({
url:"members.json",
method:"GET",
dataType: 'json',
contentType: "application/json"
}).then(function(response){
var myData = response.data.member;
return(myData);
},function(response){
throw response;
});
}
}]);
</script>
这是我的观点
[1]: https://i.stack.imgur.com/PQ0BP.jpg
这是我的密码
[1]: https://i.stack.imgur.com/Q9tZp.jpg
这是我的json文件
{
“成员”：[
{“Id”：“1”，
“姓名”：“阿米特·辛格”，
“加入日期”：“21-03-2003”，
“编号”：“934234334”
},{
“Id”：“2”，
“姓名”：“穆罕默德·阿米尔”，
“加入日期”：“2012年3月21日”，
“编号”：“93434”
}
]
}
搜索成员。
搜寻
{{x.Name}
var-app=angular.module（“myApp”，[]）；
应用程序控制器（'ctrl'，
['$scope'，'myService'，'$log'，函数（$scope，myService，$log）{
$scope.doSearch=函数（）{
getData（$scope.searchId）。然后（函数（数据）{
$scope.data=数据；
$log.info（$scope.data）；
});
};
}])
app.service（'myService'，['$http'，'$log'，function（$http，$log）{
this.getData=函数（memberId）{
返回$http({
url:“members.json”，
方法：“获取”，
数据类型：“json”，
contentType:“应用程序/json”
}).然后（功能（响应）{
var myData=response.data.member；
返回（myData）；
}，功能（回应）{
投掷反应；
});
}
}]);
app.service('myService', ['$http','$log', function($http,$log){
this.getData = function(memberId){
return $http({
url:"members.json",
method:"GET",
dataType: 'json',
contentType: "application/json"
}).then(function(response){
var myData = response.data.member.filter(member=>member.Id==memberId)[0];
return(myData);
},function(response){
throw response;
});
}
}]);
表过滤器
平均距离质量
{{p.name}{{p.distance}}{{p.mass}}
response.data.membermemberId