Question

有人帮助我，当我开始编写代码以使用angularJS在Blade中显示数据时，数据未显示在页面中，甚至数据也存在于控制台中。我的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-model 来显示数据前端。

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>

2-AngularJS ng-model指令实时示例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>

注意：尝试使用静态数据，然后检查您是否拥有有效的数据以使其动态化

希望对您有所帮助！

如何修复AngularJS和Laravel无法显示的数据

1 个答案: