首页 \ 问答 \ 角度控制器加载但不显示ng-repeat(Angular controller loads but ng-repeat doesn't show)

角度控制器加载但不显示ng-repeat(Angular controller loads but ng-repeat doesn't show)

我正在学习angularJS,我在尝试使用ng-repeat时遇到了问题。我知道模板和控制器正在加载,因为我做了一个console.log(self.post)测试,显示了我期望的单个帖子demoSuggestions和模板加载我期望的comCtrl.post.title。 但是comCtrl.post.comments中的ng-repeat ='注释没有显示任何内容。 关于我做错了什么的任何想法?

HTML

<script type='text/ng-template' id='/suggestions.html'>
  <div class='row' ng-controller='commentsController as comCtrl'>
    <div class='col-xs-12'>
        <div class='commentTitle'>
            <h3 class='text-center'>{{comCtrl.post.title}}</h3>
        </div><!--End of commentTitle-->
    </div><!--End of col-->
  </div><!--End of row-->
  <div class='row' ng-repeat='comment in comCtrl.post.comments'>
      <div class='col-xs-12 col-sm-10 col-sm-offset-1'>
          <div class='commentContainer'>
              <div class='row'>
                  <div class='col-xs-3 col-sm-2 col-md-1'>
                      <div class='thumbsUp'>
                          <i class="fa fa-thumbs-up" ng-click='comCtrl.upVote($index)'></i>
                      <span>{{comment.upvotes}}</span>
                      </div><!--End of thumbsUp-->
                  </div><!--End of col-->
                  <div class='col-xs-9 col-sm-10 col-md-11'>
                      <div class='commentBody'>
                          <span>{{comment.body}}</span>
                      </div><!--End of commentBody-->
                  </div><!--End of col-->
              </div><!--End of row-->
          </div><!--End of commentContainer-->
      </div><!--End of col-->
  </div><!--End of row-->
  <div class='row'>
    <div class='col-xs-12'>
      <form id='comment' ng-submit="addComment()" style="margin-top: 50px">
        <h3> Submit Your Comment </h3>
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Place comment here" ng-model="body"></input>
        </div><!--End of form-group-->
        <button type="submit" class="btn btn-danger">Suggest</button>
      </form>
    </div><!--End of col-->
  </div><!--End of row-->
</script>

模块和配置

var suggestionApp = angular.module('suggestionBox', ['ngRoute'])
.config(['$routeProvider', function ($routeProvider) {
  $routeProvider
    .when('/', {
      templateUrl: '/home.html',
    })
    .when('/suggestion/:id',{
      templateUrl:'/suggestions.html'
    })
    .otherwise({
        redirectTo:'/'
    });
}]);

控制器和服务

.controller('commentsController',['$routeParams','suggestions', function($routeParams, suggestions){
    var self = this;
    var swap = 1;
    self.post = suggestions.posts[$routeParams.id];
    console.log(self.post)
    self.addComment = function() {
         self.post.comments.push({
             body:self.body,
             upvotes:0
         });
        };

    self.upVote=function(index){
    if(swap)
        {
            self.post.comments[index].upvotes += 1;
            $('.thumbsUp .fa').eq(index).css('color','red');
            swap=0;
        }
    else
        {
            self.post.comments[index].upvotes -= 1;
            $('.thumbsUp .fa').eq(index).css('color', 'black');
            swap=1;
        }

  };
}])
.factory('suggestions', [function(){
    var demoSuggestions = {
    posts: [
        {
            title: 'Term limits on congress',
            avatar:'https://upload.wikimedia.org/wikipedia/commons/7/7a/US_Navy_040521-N-9909C-006_Established_by_the_American_Battle_Monuments_Commission,_the_memorial_honors_all_military_veterans_of_World_War_II.jpg',
            upvotes: 15,
            comments: [
                {body:'love the idea',upvotes:0},
                {body:'let\'s make this happen', upvotes:0},
                      ]
        },
        {
            title: 'Every two years a popular vote on two issues that passes into law without Congress.',
            avatar:'https://upload.wikimedia.org/wikipedia/commons/3/3e/The_Marine_Corps_War_Memorial_in_Arlington,_Va.,_can_be_seen_prior_to_the_Sunset_Parade_June_4,_2013_130604-M-MM982-036.jpg',
            upvotes: 9,
            comments: [
                {body:'Only if the judicial branch still rules on its constitutionality.', upvotes:0},
                {body:'Do you really think people would come out to vote?', upvotes:0},
                {body:'I\'d be down for this',upvotes:0}
                      ]
        },
        {
            title: 'Create a biometric scanner for all those entering the country.',
            avatar:'https://upload.wikimedia.org/wikipedia/commons/e/ea/Washington_Monument_-_01.jpg',
            upvotes: 7,
            comments:[
                        {body:'Seriously, not cost effective', upvotes:0},
                    ],
        },
        {
            title: 'Become more isolationist and bring our troops back home.',
            avatar:'https://upload.wikimedia.org/wikipedia/commons/3/3b/Bunker_hill_2009.JPG',
            upvotes: 3,
            comments: [
                        {body:'sounds a little grim',upvotes:0}
                      ],
        }
    ]
};
    return demoSuggestions;
    }]);

I'm learning angularJS and I'm having an issue trying to use ng-repeat.I know that the template and controller are loading because I did a console.log(self.post) test that shows the single post that I expect from the demoSuggestions and the template loads the comCtrl.post.title that I expect. But the ng-repeat='comment in comCtrl.post.comments doesn't show anything. Any ideas as to what I'm doing wrong?

HTML

<script type='text/ng-template' id='/suggestions.html'>
  <div class='row' ng-controller='commentsController as comCtrl'>
    <div class='col-xs-12'>
        <div class='commentTitle'>
            <h3 class='text-center'>{{comCtrl.post.title}}</h3>
        </div><!--End of commentTitle-->
    </div><!--End of col-->
  </div><!--End of row-->
  <div class='row' ng-repeat='comment in comCtrl.post.comments'>
      <div class='col-xs-12 col-sm-10 col-sm-offset-1'>
          <div class='commentContainer'>
              <div class='row'>
                  <div class='col-xs-3 col-sm-2 col-md-1'>
                      <div class='thumbsUp'>
                          <i class="fa fa-thumbs-up" ng-click='comCtrl.upVote($index)'></i>
                      <span>{{comment.upvotes}}</span>
                      </div><!--End of thumbsUp-->
                  </div><!--End of col-->
                  <div class='col-xs-9 col-sm-10 col-md-11'>
                      <div class='commentBody'>
                          <span>{{comment.body}}</span>
                      </div><!--End of commentBody-->
                  </div><!--End of col-->
              </div><!--End of row-->
          </div><!--End of commentContainer-->
      </div><!--End of col-->
  </div><!--End of row-->
  <div class='row'>
    <div class='col-xs-12'>
      <form id='comment' ng-submit="addComment()" style="margin-top: 50px">
        <h3> Submit Your Comment </h3>
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Place comment here" ng-model="body"></input>
        </div><!--End of form-group-->
        <button type="submit" class="btn btn-danger">Suggest</button>
      </form>
    </div><!--End of col-->
  </div><!--End of row-->
</script>

Module & config

var suggestionApp = angular.module('suggestionBox', ['ngRoute'])
.config(['$routeProvider', function ($routeProvider) {
  $routeProvider
    .when('/', {
      templateUrl: '/home.html',
    })
    .when('/suggestion/:id',{
      templateUrl:'/suggestions.html'
    })
    .otherwise({
        redirectTo:'/'
    });
}]);

Controller & Service

.controller('commentsController',['$routeParams','suggestions', function($routeParams, suggestions){
    var self = this;
    var swap = 1;
    self.post = suggestions.posts[$routeParams.id];
    console.log(self.post)
    self.addComment = function() {
         self.post.comments.push({
             body:self.body,
             upvotes:0
         });
        };

    self.upVote=function(index){
    if(swap)
        {
            self.post.comments[index].upvotes += 1;
            $('.thumbsUp .fa').eq(index).css('color','red');
            swap=0;
        }
    else
        {
            self.post.comments[index].upvotes -= 1;
            $('.thumbsUp .fa').eq(index).css('color', 'black');
            swap=1;
        }

  };
}])
.factory('suggestions', [function(){
    var demoSuggestions = {
    posts: [
        {
            title: 'Term limits on congress',
            avatar:'https://upload.wikimedia.org/wikipedia/commons/7/7a/US_Navy_040521-N-9909C-006_Established_by_the_American_Battle_Monuments_Commission,_the_memorial_honors_all_military_veterans_of_World_War_II.jpg',
            upvotes: 15,
            comments: [
                {body:'love the idea',upvotes:0},
                {body:'let\'s make this happen', upvotes:0},
                      ]
        },
        {
            title: 'Every two years a popular vote on two issues that passes into law without Congress.',
            avatar:'https://upload.wikimedia.org/wikipedia/commons/3/3e/The_Marine_Corps_War_Memorial_in_Arlington,_Va.,_can_be_seen_prior_to_the_Sunset_Parade_June_4,_2013_130604-M-MM982-036.jpg',
            upvotes: 9,
            comments: [
                {body:'Only if the judicial branch still rules on its constitutionality.', upvotes:0},
                {body:'Do you really think people would come out to vote?', upvotes:0},
                {body:'I\'d be down for this',upvotes:0}
                      ]
        },
        {
            title: 'Create a biometric scanner for all those entering the country.',
            avatar:'https://upload.wikimedia.org/wikipedia/commons/e/ea/Washington_Monument_-_01.jpg',
            upvotes: 7,
            comments:[
                        {body:'Seriously, not cost effective', upvotes:0},
                    ],
        },
        {
            title: 'Become more isolationist and bring our troops back home.',
            avatar:'https://upload.wikimedia.org/wikipedia/commons/3/3b/Bunker_hill_2009.JPG',
            upvotes: 3,
            comments: [
                        {body:'sounds a little grim',upvotes:0}
                      ],
        }
    ]
};
    return demoSuggestions;
    }]);

原文:https://stackoverflow.com/questions/39161267
更新时间:2021-05-31 18:05

最满意答案

修复。 只是循环的问题。

    for ($a = 0; $a < $counter; $a++) {
        $release = 0;
        for ($i = 0; $i < count($request->release); $i++) {
            if ($request->release) {
                if ($request->release[$i] == $user_id_list[$a]) {
                    $release = 1;
                }
            }
        }
        $userrelease = User::where('id', $user_id_list[$a])
            ->where('owner_id', Auth::user()->owner_id)
            ->first();
        if ($userrelease && $userrelease->role != "owner") {
            $userrelease->active = $release;
            $userrelease->save();
        }
    }

Fixed it. Just a problem with the loops.

    for ($a = 0; $a < $counter; $a++) {
        $release = 0;
        for ($i = 0; $i < count($request->release); $i++) {
            if ($request->release) {
                if ($request->release[$i] == $user_id_list[$a]) {
                    $release = 1;
                }
            }
        }
        $userrelease = User::where('id', $user_id_list[$a])
            ->where('owner_id', Auth::user()->owner_id)
            ->first();
        if ($userrelease && $userrelease->role != "owner") {
            $userrelease->active = $release;
            $userrelease->save();
        }
    }

相关问答

更多
  • 如果要检查数组a任何单个数字是否也在数组b则应使用嵌套for循环。 例如 int numMatches = 0; for (int i = 0; i < a.length; ++i) { for (int j = 0; j < b.length; ++j) { if (a[i] == b[j]) ++numMatches; //Naive, as obviously if the same number appears twice in a it'll ...
  • 这是我从这个问题中了解到的: array1 = list("abcd") array2 = list("bdace") array3 = range(1,6) out = [] for element in array2: if element in array1: out.append(array3[array1.index(element)]) print out This is what I understand from the question: array1 = l ...
  • 修复。 只是循环的问题。 for ($a = 0; $a < $counter; $a++) { $release = 0; for ($i = 0; $i < count($request->release); $i++) { if ($request->release) { if ($request->release[$i] == $user_id_list[$a]) { ...
  • 你的代码应该是: for(i=0;i<12;i++) { if(a[i] == b[i]) { printf("1"); } else { printf("0"); } } 不需要两个循环。 你想比较在相同索引的数组中的元素,所以索引i应该对于两个数组都是相同的。 Your code should be: for(i=0;i<12;i++) { if(a[i] == b[i]) { printf("1"); } else { p ...
  • 你可以通过每个数组一次,显然使用删除保存迭代,就像从数组后面循环。 int[] same for (int i = arr1.length; i >= 0; i--) { if(arr2.contains(i)) same.add(i) arr1.remove(i) } for (int i = arr2.length; i >= 0; i--) { if(same.contains(i)) arr2.remove(i) } 然后arr1将被 ...
  • 好吧,如果$assigned_statuses和$statuses都是有效数组,你可以使用array_intersect函数比较它们,如下所示: $variable = array_intersect($assigned_statuses, $statuses); 这将在值中搜索相似性,并将在两个数组之间的所有匹配值的$variable变量中构造另一个数组。 然后,您可以使用array_diff方法在两组数组中查找唯一值 Well if $assigned_statuses and $statuses ar ...
  • 我认为这可以满足您的需求,并且与您的排序算法一样高效: 创建临时数组a1,a2 ,它们分别包含减号元素和数组长度n 。 连接a1和a2并对结果进行排序,以获得a' 。 排序b以获得b' 。 启动计数器i=0, j=0 虽然a'[i]!=b'[j] : 虽然i
  • 这样就足够了: '18', 'mykey'=>'value1', 'something'=>'1' ); $array2 = array( 'entry'=>'18', 'mykey'=>'value2', 'something'=>'1' ); $output = array(); foreach($array1 as $k=>$v){ if(isset($array2[$k]) && ...
  • 您使用bruteforce算法来解决问题。 假设A和B分别具有N和M的大小,则检查相等的每个小数组是K个元素长。 鉴于匹配数为Z (可能达到NM ),您的算法在最坏情况下需要O(NMK)时间,在最佳情况下需要O(NM + ZK )。 请注意,每个小数组本质上都是一个字符串。 您有两组字符串,并且您希望检测它们之间的所有相等对。 这个问题可以用哈希表来解决。 使用O(M)单元格创建哈希表。 在此表中,存储数组B的字符串而不重复。 从B添加所有字符串后,从A迭代字符串并检查它们是否存在于哈希表中。 该解决方案可 ...
  • 使用Collection类removeAll方法 String original[] = { "1","2","3","4","6"}; String testStr[] = { "1","2","3","5","7" }; List origList = new ArrayList(Arrays.asList(original)); List testList = new ArrayList(Arrays.asList(testStr)); ...

相关文章

更多

最新问答

更多
  • 获取MVC 4使用的DisplayMode后缀(Get the DisplayMode Suffix being used by MVC 4)
  • 如何通过引用返回对象?(How is returning an object by reference possible?)
  • 矩阵如何存储在内存中?(How are matrices stored in memory?)
  • 每个请求的Java新会话?(Java New Session For Each Request?)
  • css:浮动div中重叠的标题h1(css: overlapping headlines h1 in floated divs)
  • 无论图像如何,Caffe预测同一类(Caffe predicts same class regardless of image)
  • xcode语法颜色编码解释?(xcode syntax color coding explained?)
  • 在Access 2010 Runtime中使用Office 2000校对工具(Use Office 2000 proofing tools in Access 2010 Runtime)
  • 从单独的Web主机将图像传输到服务器上(Getting images onto server from separate web host)
  • 从旧版本复制文件并保留它们(旧/新版本)(Copy a file from old revision and keep both of them (old / new revision))
  • 西安哪有PLC可控制编程的培训
  • 在Entity Framework中选择基类(Select base class in Entity Framework)
  • 在Android中出现错误“数据集和渲染器应该不为null,并且应该具有相同数量的系列”(Error “Dataset and renderer should be not null and should have the same number of series” in Android)
  • 电脑二级VF有什么用
  • Datamapper Ruby如何添加Hook方法(Datamapper Ruby How to add Hook Method)
  • 金华英语角.
  • 手机软件如何制作
  • 用于Android webview中图像保存的上下文菜单(Context Menu for Image Saving in an Android webview)
  • 注意:未定义的偏移量:PHP(Notice: Undefined offset: PHP)
  • 如何读R中的大数据集[复制](How to read large dataset in R [duplicate])
  • Unity 5 Heighmap与地形宽度/地形长度的分辨率关系?(Unity 5 Heighmap Resolution relationship to terrain width / terrain length?)
  • 如何通知PipedOutputStream线程写入最后一个字节的PipedInputStream线程?(How to notify PipedInputStream thread that PipedOutputStream thread has written last byte?)
  • python的访问器方法有哪些
  • DeviceNetworkInformation:哪个是哪个?(DeviceNetworkInformation: Which is which?)
  • 在Ruby中对组合进行排序(Sorting a combination in Ruby)
  • 网站开发的流程?
  • 使用Zend Framework 2中的JOIN sql检索数据(Retrieve data using JOIN sql in Zend Framework 2)
  • 条带格式类型格式模式编号无法正常工作(Stripes format type format pattern number not working properly)
  • 透明度错误IE11(Transparency bug IE11)
  • linux的基本操作命令。。。