Repeat does not work - Angular

Asked

Viewed 108 times

-2

I couldn’t repeat the lines

<!DOCTYPE html>
<html>
<head>

    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.1.js"></script>
    <link href=
    "//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel=
    "stylesheet">
    <link href="main.css" rel="stylesheet">
    <style>
    table,
        th,
        td {
          border: 1px solid black;
          border-collapse: collapse;
        }

        th,
        td {
          padding: 5px;
        }
    </style>

    <title></title>
</head>

<body>
    <table class="table table-bordered">
        <thead>
            <tr>
                <th>Avaliação 01</th>

                <th>Avaliação 02</th>

                <th>Avaliação 03</th>

                <th>Avaliação 04</th>

                <th>Avaliação 05</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>
                    <div>
                        <pre>
{{avaliacao.avalia_1}}
</pre>

                        <div class="btn-group" id="mode-group">
                            <label>S</label> <label>N</label> <label>AV</label>
                            <label>NA</label>
                        </div>
                    </div>
                </td>

                <td>
                    <div>
                        <pre>
{{avalia_2}}
</pre>

                        <div class="btn-group" id="mode-group">
                            <label>S</label> <label>N</label> <label>AV</label>
                            <label>NA</label>
                        </div>
                    </div>
                </td>

                <td>
                    <div>
                        <pre>
{{avalia_3}}
</pre>

                        <div class="btn-group" id="mode-group">
                            <label>S</label> <label>N</label> <label>AV</label>
                            <label>NA</label>
                        </div>
                    </div>
                </td>

                <td>
                    <div>
                        <pre>
{{avalia_4}}
</pre>

                        <div class="btn-group" id="mode-group">
                            <label>S</label> <label>N</label> <label>AV</label>
                            <label>NA</label>
                        </div>
                    </div>
                </td>

                <td>
                    <div>
                        <pre>
{{avalia_5}}
</pre>

                        <div class="btn-group" id="mode-group">
                            <label>S</label> <label>N</label> <label>AV</label>
                            <label>NA</label>
                        </div>
                    </div>
                </td>
            </tr>
        </tbody>
    </table><script>
    angular.module('ui.bootstrap.demo', ['ui.bootstrap']);

        angular.module('ui.bootstrap.demo').controller('ButtonsCtrl', function($scope) {

          $scope.avaliacoes = [{
            avalia_1: 'S',
            avalia_2: 'AV',
            avalia_3: 'S'
          }, {
            avalia_1: 'S',
            avalia_2: 'NA',
            avalia_3: 'N'
          }, {
            avalia_1: 'S',
            avalia_2: 'AV',
            avalia_3: 'S'
          }, {
            avalia_1: 'S',
            avalia_2: 'NA',
            avalia_3: 'N'
          }, {
            avalia_1: 'S',
            avalia_2: 'AV',
            avalia_3: 'S'
          }];






        });
    </script>
</body>
</html>

http://plnkr.co/edit/aSZtlHrJFb7yG3xzDr6i?p=preview

twitter-bootstrap angularjs

  • What lines? You have to be more specific to help you

  • Your plunker is completely different from your code in the matter. The question code has no ngRepeat. The plunker code does not have the controller code. Please clarify your problem further.

2 answers

1

Dude, I agree with what colleagues said. But to give a help, I leave below an example of ngRepeater:

<tr ng-repeat="usuario in ListaUsuarios">
   <td>{{usuario.nome}}</td>
   <td>{{usuario.data | date: 'dd/MM/yyyy'}}</td>
</tr>

Code in Javascript Angularjs:

app.controller("AngularController",
    ['$scope', "$http", function ($scope, $http) {
        var URLApi = "/WebApi/api/usuarios/";
        //Promessa

        $scope.amigos = "Olá amigos";
        $scope.ListaUsuarios = [
            {
                nome: "Tiago",
                data: "07/03/2017"
            }
        ];
}]);

I think that should clear up any doubts. abs.

  • My code has been edited. I posted the same as plunker. I’m still adapting to stackoverflow. I don’t understand why it was edited. Could someone enlighten me?

  • @Luissouza I’ve never heard of anyone else editing your comments or code, except in cases of violating community rules.

0


The directive was missing from the table. I was using the Angular expressions in the table before putting the directive. It worked!

<table style="width:100%" ng-controller="ButtonsCtrl">

Browser other questions tagged twitter-bootstrap angularjs

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