AngularJS：我将如何根据 ID 从数组中选择一行

Question

这已经更新，并且是功能性的谢谢@j.wittwer http://jsfiddle.net/wittwerj/2xjuh/

我正在尝试根据 ID 从帖子数组中选择一行。选择单个帖子的目的是创建一个视图，用户可以在其中评论特定帖子。

我不确定解决此问题的最佳方法是什么。我想过只创建一个模型，但我不确定如何选择一行来实现这一点。然后我还需要使用表单控制器选择它，以便我可以将数组中的它发送回 ajax，以便将它发布到该帖子的数组中。

如果代码混乱，我深表歉意，firefox 似乎不喜欢格式化堆栈适用。

这是我的 JS 代码：（已更新）

    var myApp = angular.module('myApp', []);

myApp.controller('FrmController', function ($scope, $http) {
    $scope.visible = {
        post: 1
    };
    $scope.posts = [{
        id: 1,
        content: 'Lorem ipsum dolor sit amet, eu laboramus persecuti cum, vel prompta ornatus democritum at, te alia partiendo pri. Ei quo sumo verear. Sed ad elitr aeterno disputationi, solum philosophia ex pro. Tempor essent prodesset in his, ne diam menandri vix, feugiat menandri ad cum.',
        comment: ['first!!', 'second!!']
    }, {
        id: 2,
        content: 'Facilisi pertinacia an nec. Veniam nostro commune ei pro, in mazim labores disputationi nec, cu habeo ludus deleniti ius. Id eripuit adolescens vis, mei nemore copiosae referrentur id. Pro ut ubique delicatissimi.',
        comment: ['great post!', 'tl;dr', 'interesting']
    }, {
        id: 3, 
        content: 'Sed fugit error cu. In cetero albucius insolens pri, an sea velit altera constituto. Et perpetua splendide sed, te vel solum doming contentiones. Pro no omnes ridens liberavisse, ea pri tale cetero laoreet, pro te essent civibus assueverit. Assum essent appareat mei te, duo aeque consulatu et, te mel reque facilisis.',
        comment: ['first to comment!']
    } ];
    $scope.btn_add = function (post, comment) {
        if (comment != '') {
            var IS_VALID = true;
        }

        if (IS_VALID) {
            console.log("The form was sent");
            post.comment.push(comment);
        }
    }

    $scope.remItem = function (post, $index) {
        post.comment.splice($index, 1);
    }
});

HTML：（已更新）

    <div ng-controller="FrmController">choose a post ({{visible.post}} is visible)
    <ul>
        <li ng-repeat="post in posts" style="display: inline; list-style-type: none;">
            <input type="button" ng-click="visible.post = post.id" value="{{post.id}}" />
        </li>
    </ul>
    <div ng-repeat="post in posts" ng-if="visible.post == post.id">{{post.content}}
        <form>Post your Comment (for post {{post.id}})
            <textarea ng-model="txtcomment" placeholder="Your Comment" style='width:550px'></textarea>
            <button ng-click='btn_add(post, txtcomment);txtcomment = "";' style='margin-top:10px;'>Post Comment</button>
             <h4>Comments</h4>

            <ul>
                <li ng-repeat="comnt in post.comment">{{ comnt }}<a style="float: right;" href="" ng-click="remItem(post, $index)">x</a>

                </li>
            </ul>
        </form>
    </div>
</div>

Answer 1

我能想到的最简单的方法是让ng-click 设置一个变量，指示哪个帖子可见/正在评论。然后在ng-if 中使用该变量来显示正确的帖子。

<ul>
    <li ng-repeat="post in posts">
        <input type="button" ng-click="visible.post = post.id" value="{{post.id}}" />
    </li>
</ul>
<div ng-repeat="post in posts" ng-if="visible.post == post.id">{{post.content}}
...

这是一个工作演示：http://jsfiddle.net/wittwerj/2xjuh/