Angular - I cannot view table data

Asked

Viewed 471 times

0

I don’t understand why it doesn’t display table data, it’s identical to the page I was using to study.

Code:

<!DOCTYPE html>
<html>
<script src="/lib/angular-1.4.8.min.js"></script>
<body>

<div class="container">
    <form class="navbar-form" role="search">
        <div ng-app="myApp" ng-controller="namesCtrl">
            <p>Pesquise um menu</p>
            <p><input type="text" ng-model="test"></p>
    </form>
    <div class="row">
        <div class="table-responsive">
            <table class="table table-hover">
                <thead>
                    <tr>
                        <th>Nome</th>
                        <th>Preço</th>
                    </tr>
                </thead>
                <tbody id="myTable">
                    <tr ng-repeat="x in names | filter:test">
                        <td>{{ x }}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
<script>
    angular.module('myApp', []).controller('namesCtrl', function($scope) {
        $scope.names = [
            'Jani',
            'Carl',
            'Margareth',
            'Hege',
            'Joe',
            'Gustav',
            'Birgit',
            'Mary',
            'Kai'
        ];
    });
</script>

</body>
</html>

Upshot : resultado

javascript html angularjs

  • Open the console and see what the error is.

1 answer

4


There is nothing wrong with the code itself. Probably the location of the script of Angularjs is not /lib/angular-1.4.8.min.js.

HTML is a little weird, but that doesn’t stop the application from working.

Has an opening of div left inside the form. HTML should be more similar to the below.

See code working using a CDN.

angular.module('myApp', []).controller('namesCtrl', function($scope) {
        $scope.names = [
            'Jani',
            'Carl',
            'Margareth',
            'Hege',
            'Joe',
            'Gustav',
            'Birgit',
            'Mary',
            'Kai'
        ];
    });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="container" ng-app="myApp" ng-controller="namesCtrl">
    <form class="navbar-form" role="search">
            <p>Pesquise um menu</p>
            <p><input type="text" ng-model="test"></p>
    </form>
    <div class="row">
        <div class="table-responsive">
            <table class="table table-hover">
                <thead>
                    <tr>
                        <th>Nome</th>
                        <th>Preço</th>
                    </tr>
                </thead>
                <tbody id="myTable">
                    <tr ng-repeat="x in names | filter:test">
                        <td>{{ x }}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

Browser other questions tagged javascript html angularjs

You are not signed in. Login or sign up in order to post.