为什么ng-repeat不起作用?

时间:2016-06-30 19:55:01

标签: javascript angularjs

ng-repeat不使用表,在仅输出标题部分显示? 因为我认为我所做的绑定完全没问题,但我缺少哪些东西? 任何人都可以帮我解决我做错的地方吗?

JAVA SCRIPT:



var myapp=angular.module("MyApp",[]);
var controller=function($scope)
{ 
        var technology1=[
            {Name: "C#",Likes: 0,Dislikes: 0},
            {Name: "JAVA",Likes:0,Dislikes:0},
            {Name: "Python",Likes:0,Dislikes:0}
        ];
        $scope.technology=technology1;
        $scope.incrementLikes=finction(technology)
        {
            technology.Likes++;
        }
        $scope.discrementLikes=function(technology)
        {
        technology.Dislikes++;
        }
}
myapp.controller('MyController',controller);

    <html ng-app="MyApp">
    <head>
        <title></title>
        <script src="angular.js"></script>
        <script src="Day2.js"></script>

    </head>
    <Body ng-controller="MyController">
    <div >
        <table border='2'>
        <thead> 
            <tr>
            <th>Name Of Technology</th>
            <th>Likes</th>
            <th>Dislikes</th>
            <th>Likes/Dislikes</th>
            </tr>
        </thead>

        <tbody>
        <tr ng-repeat="tech in technology">
            <td>{{tech.Name}}</td>
            <td>{{tech.Likes}}</td>
            <td>{{tech.Dislikes}}</td>
            <td>
            <input type="button" value="Like" ng-click="incrementLikes(tech)">
            <input type="button" value="Dislikes" ng-click="decrementLikes(tech)">
            </td>
        </tr>
        </tbody>
        </table>
    </div>
    </Body>
    </html>
&#13;
&#13;
&#13;

4 个答案:

答案 0 :(得分:0)

替换此行

        $scope.incrementLikes=finction(technology)

通过

        $scope.incrementLikes=function(technology)

答案 1 :(得分:0)

您的代码在myController控制器中有拼写错误。将finction更改为function

答案 2 :(得分:0)

正如Pankaj Parkar指出你需要更正“finction”拼写错误以及在增加值时引用$ scope.technology.Likes和$ scope.technology.dislikes。

所以更新这些行:

$scope.incrementLikes=finction(technology)
    {
        technology.Likes++;
    }
$scope.discrementLikes=function(technology)
    {
    technology.Dislikes++;
    }

到此

$scope.incrementLikes=function(technology)
    {
        $scope.technology.Likes++;
    }
$scope.discrementLikes=function(technology)
    {
        $scope.technology.Dislikes++;
    }

答案 3 :(得分:0)

这是完全更正的代码。我无法评论@pzelenovic的答案,但不要添加“$ scope.technology.Likes ++;”或“$ scope.technology.Likes ++;”你的增量/减量函数。这些都很好,因为你正在更新你从点击功能传入的“tech”对象上的喜欢/不喜欢的属性。

var myapp=angular.module("MyApp",[]);
var controller=function($scope)
{ 
        var technology1=[
            {Name: "C#",Likes: 0,Dislikes: 0},
            {Name: "JAVA",Likes:0,Dislikes:0},
            {Name: "Python",Likes:0,Dislikes:0}
        ];
        $scope.technology=technology1;
        $scope.incrementLikes=function(technology)
        {
            technology.Likes++;
        }
        $scope.decrementLikes=function(technology)
        {
        technology.Dislikes++;
        }
}
myapp.controller('MyController',controller);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html ng-app="MyApp">
    <head>
        <title></title>
        <script src="angular.js"></script>
        <script src="Day2.js"></script>

    </head>
    <Body ng-controller="MyController">
    <div >
        <table border='2'>
        <thead> 
            <tr>
            <th>Name Of Technology</th>
            <th>Likes</th>
            <th>Dislikes</th>
            <th>Likes/Dislikes</th>
            </tr>
        </thead>

        <tbody>
        <tr ng-repeat="tech in technology">
            <td>{{tech.Name}}</td>
            <td>{{tech.Likes}}</td>
            <td>{{tech.Dislikes}}</td>
            <td>
            <input type="button" value="Like" ng-click="incrementLikes(tech)">
            <input type="button" value="Dislikes" ng-click="decrementLikes(tech)">
            </td>
        </tr>
        </tbody>
        </table>
    </div>
    </Body>
    </html>