AngularJS:我该如何根据ID从数组中选择一行

AngularJS: How would I go about selecting a single row from an array based on ID

本文关键字：选择 一行 数组 何根 ID AngularJS      更新时间：2023-09-26

这已经更新，并且是功能性的谢谢@j.wittwerhttp://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>

我能想到的最简单的方法是让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/

相关文章：