怎么實作模糊搜索關鍵字之后顯示有搜索關鍵字的內容,并顯示出其內容標題,
<!doctype html>
<html lang="zh-cn" ng-app="app">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="keywords" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>作業三</title>
<link rel="stylesheet" href="https://bbs.csdn.net/css/bootstrap.css">
<script src="https://bbs.csdn.net/js/angular.js"></script>
<script src="https://bbs.csdn.net/js/angular-sanitize.min.js"></script>
</head>
<body ng-controller="ctr" >
<input type="text" class="form-control" ng-model="Newsname.name">
<ul class="list-group">
<li ng-repeat="item in newsList">{{item.cn}}</li>
</ul>
<ul class="list-unstyled list-inline" >
<li ng-repeat="item in newsData[activeitem]|filter:Newsname.name">
<div class="media" >
<div class="media-body">
{{item.title}}
</div>
<div class="media-right" >
<img ng-src="https://bbs.csdn.net/topics/{{item.picInfo[0].url}}" style="width: 100px">
</div>
</div>
</li>
</ul>
</body>
</html>
<script>
angular.module("app",["ngSanitize"])
.controller("ctr",["$scope","$http","$rootScope",function ($scope,$http,$rootScope){
$rootScope.newsList=[
{en:"auto",cn:"汽車",state:true},
{en:"dy",cn:"推薦",state:true},
{en:"ent",cn:"娛樂",state:true},
{en:"home",cn:"家居",state:true},
{en:"sports",cn:"體育",state:true},
{en:"tech",cn:"科教",state:true},
{en:"toutiao",cn:"新聞",state:true},
{en:"war",cn:"軍事",state:true},
{en:"money",cn:"財經",state:false}
];
$rootScope.activeitem="toutiao";
$scope.Newsname={"name":""};
var url="yaowen.json";
$scope.getNews=function () {
$http({
methon:"GET",
url:url
}).then(function (res) {
$rootScope.newsData=https://bbs.csdn.net/topics/res.data.data;
}),
function (err) {
}
};
$scope.$watch("Newsname",function (n,o) {
for(var index in $rootScope.newsData ){
for(var i=0;i<$rootScope.newsData[index].length;i++){
if(n.name==$rootScope.newsData[index][i].title){
$scope.Newscn=$rootScope.newsData[index][i].category;
}
}
console.log( $rootScope.newsData[index][i].category)
}
});
$scope.getNews();
}])
</script>
轉載請註明出處,本文鏈接:https://www.uj5u.com/qianduan/57682.html
標籤:JavaScript
