Before proceed, I recommend you to go through Learn Angular js for better understanding.
Lets assume to do search in a custom list called "ListA"
Create one js file "ListSearch.js" and upload in any library
var spApp = angular.module("spApp", []).controller("viewItemController", function($scope, $http) {
var url = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getByTitle('ListA')/items";
$http({
method: "GET",
url: url,
headers: {
"accept": "application/json;odata=verbose"
}
}).success(function(data, status, headers, config) {
var dataResults = data.d.results;
$scope.contacts = dataResults;
}).error(function(data, status, headers, config) {});
})
Create one html file with below html or we can put it in a content editor to get the result.
<html>
<head>
<script type="text/javascript" src="/SiteAssets/jquery-3.0.0.min.js"></script>
<script type="text/javascript" src="/SiteAssets/angular.min.js"></script>
<script type="text/javascript" src="/SiteAssets/listSearch.js"></script>
</head>
<body>
<h3>View Contacts</h3>
<hr/>
<div ng-app="spApp">
<div ng-controller="viewItemController"> Search Items:<input type="text" placeholder="searchItems" ng-model="searchText" />
<table>
<tr>
<th>Product</th>
<th>Total Sales</th>
<th>Sales Target</th>
</tr>
<tr ng-repeat="contact in contacts|filter:searchText">
<td>{{contact.Product}}</td>
<td>{{contact.Total_x0020_Sales}}</td>
<td>{{contact.Sales_x0020_Target}}</td>
</tr> <br /> </table>
</div>
<hr /> </body>
</html>
Lets assume to do search in a custom list called "ListA"
Create one js file "ListSearch.js" and upload in any library
var spApp = angular.module("spApp", []).controller("viewItemController", function($scope, $http) {
var url = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getByTitle('ListA')/items";
$http({
method: "GET",
url: url,
headers: {
"accept": "application/json;odata=verbose"
}
}).success(function(data, status, headers, config) {
var dataResults = data.d.results;
$scope.contacts = dataResults;
}).error(function(data, status, headers, config) {});
})
Create one html file with below html or we can put it in a content editor to get the result.
<html>
<head>
<script type="text/javascript" src="/SiteAssets/jquery-3.0.0.min.js"></script>
<script type="text/javascript" src="/SiteAssets/angular.min.js"></script>
<script type="text/javascript" src="/SiteAssets/listSearch.js"></script>
</head>
<body>
<h3>View Contacts</h3>
<hr/>
<div ng-app="spApp">
<div ng-controller="viewItemController"> Search Items:<input type="text" placeholder="searchItems" ng-model="searchText" />
<table>
<tr>
<th>Product</th>
<th>Total Sales</th>
<th>Sales Target</th>
</tr>
<tr ng-repeat="contact in contacts|filter:searchText">
<td>{{contact.Product}}</td>
<td>{{contact.Total_x0020_Sales}}</td>
<td>{{contact.Sales_x0020_Target}}</td>
</tr> <br /> </table>
</div>
<hr /> </body>
</html>
I recommend you to visit my below posts.....
Learn Angular JS
AngularJS in a SharePoint 2013 page to add list item using CSOM
Use REST API & Angular JS Implement custom search for lookup & person/group
Learn Angular JS
AngularJS in a SharePoint 2013 page to add list item using CSOM
Use REST API & Angular JS Implement custom search for lookup & person/group
No comments:
Post a Comment