Styjun

Is anyone help me, when I start to code to show data in blade with angularJS, data not showing in the page, even the data exists in the console. This following code in my app.js

// app.js

$scope.view_tab = 'shop1';
$scope.changeTab = function(tab) 
 $scope.view_tab = tab;


// List product
$scope.loadProduct = function () {
 $http.get('/getproduct').then(function success(e) 
 console.log(e.data);
 $scope.products = e.data.product;
 $scope.totalProduct = $scope.products.length;
 $scope.currentPage = 1;
 $scope.pageSize = 9;
 $scope.sortKey = 'id_kain';
;

//index.blade.php

<div class="shop-top-bar">
 <div class="shop-tab nav">
 <a ng-class="'active': view_tab == 'shop1'" ng-click="changeTab('shop1')" data-toggle="tab">
 <i class="fa fa-table"></i>
 </a>
 <a ng-class="'active': view_tab == 'shop2'" ng-click="changeTab('shop2')" data-toggle="tab">
 <i class="fa fa-list-ul"></i>
 </a>
 </div>
</div>
<div class="shop-bottom-area mt-35">
 <div class="tab-content jump">
 <div class="tab-pane" ng-class="active: view_tab == 'shop1'">
 <div class="row">
 <div ng-repeat="data in filtered = ( products | filter:search ) | orderBy:sortData | itemsPerPage: 9" class="col-xl-4 col-md-6 col-lg-6 col-sm-6">
 <div class="product-wrap mb-25 scroll-zoom">
 <div class="product-img">
 <a ng-click="showForm(data)">
 <img class="default-img" ng-src="@ data.gambar_kain[0].gambar_kain " alt="">
 <img class="hover-img" ng-src="@ data.gambar_kain[1].gambar_kain " alt="">
 </a>

 </div>
 <div class="product-content text-center">
 <h3><a href="">@data.nama_kain</a></h3>
 <div class="product-price">
 <span>@numberingFormat(data.data_kain[0].harga_kain)</span>

 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 <div class="tab-pane" ng-class="active: view_tab == 'shop2'">
 <div dir-paginate="datas in filtered = ( products | filter:search ) | orderBy:sortData | itemsPerPage:9" class="shop-list-wrap mb-30">
 <div class="row">
 <div class="col-xl-4 col-lg-5 col-md-5 col-sm-6">
 <div class="product-wrap">
 <div class="product-img">
 <a ng-click="showForm(datas)">
 <img class="default-img" ng-src="@ datas.gambar_kain[0].gambar_kain " alt="">
 <img class="hover-img" ng-src="@ datas.gambar_kain[1].gambar_kain " alt="">

 </a>
 </div>
 </div>
 </div>
 <div class="col-xl-8 col-lg-7 col-md-7 col-sm-6">
 <div class="shop-list-content">
 <h3><a href="#">@data.nama_kain</a></h3>
 <div class="product-list-price">
 <span>@numberingFormat(datas.data_kain[0].harga_kain)</span>

 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 <div class="pro-pagination-style text-center mt-30">
 <dir-pagination-controls
 max-size="1"
 direction-links="true"
 boundary-links="true" >
 </dir-pagination-controls>
 </div>
</div>

Data still not shows in the page, there are not errors in this page, but I don't know how can I fix this.

As I know there is two way to show data in Angular JS when you define the scopes then you need the ng-bind or ng-model to show data in the front end.

1- AngularJS Data Binding
live Example https://www.w3schools.com/code/tryit.asp?filename=G2DQQ2GSJ3EO

<div ng-app="myApp" ng-controller="myCtrl">
 <p ng-bind="firstname "></p>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) 
 $scope.firstname = "John will be change"; 
);
</script>

2-AngularJS ng-model Directive
Live Example https://www.w3schools.com/code/tryit.asp?filename=G2DQQEUEPSOC

<div ng-app="myApp" ng-controller="myCtrl">
Name: <input ng-model="name">
<h1>You entered: name</h1>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) 
 $scope.name = "John Doe";
);
</script>

NOTE: try with static data and then check that you have valid data to make it dynamic

I hope this helps you!