AngularJS：如何基於ID從數組中選擇一行

Question

這已經更新，並且功能齊全謝謝@ j.wittwer http://jsfiddle.net/wittwerj/2xjuh/

我正在嘗試根據ID從帖子數組中選擇一行。 選擇單個帖子的目的是創建一個單一視圖，用戶可以在其中對特定帖子發表評論。

我不確定實現此目標的最佳方法是什么。 我考慮過僅創建模型，但不確定如何選擇單個行以實現該目標。 然后，我還需要使用表單控制器選擇它，以便可以將其在數組中發送回ajax，以便將其發布到該帖子的數組中。

我很抱歉，如果代碼是混亂的，Firefox似乎不喜歡該格式適用於Stack。

這是我的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/