как исправить данные, не отображаемые с angularjs и laravel

Question

Кто-нибудь мне поможет, когда я начинаю кодировать, чтобы показывать данные в блейде с angularJS, данные не отображаются на странице, даже данные существуют в консоли. Этот следующий код в моем 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>

Данные по-прежнему не отображаются на странице, на этой странице нет ошибок, но я не знаю, как это исправить.

Answer 1

Как я знаю, есть два способа отображения данных в Angular JS, когда вы определяете области действия, тогда вам нужна ng-bind или ng-модель для отображения данных на передней панели.end.

1- Пример прямой привязки данных AngularJS 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>

Пример прямой директивы модели AngularJS 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>

ПРИМЕЧАНИЕ: попробуйте использовать статические данные, а затем убедитесь, что у вас есть действительные данные, чтобы сделать их динамичными

Надеюсь, это поможет вам!