Question

我正在尝试使用angularJS构建状态注释类型的系统。第一个文本框允许用户将值放入数组中，从而将其显示在页面上。点击时还允许文本框和按钮输入注释。但是，注释的值不会显示在范围内。代码是：

HTML

<> 0

STATUS.JS

<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="status.js"></script>
<body ng-app="myApp" ng-controller="userCtrl">

<div>
<h2>Status!</h2>
&nbsp;&nbsp;&nbsp;Post status here :<br>
&nbsp;&nbsp;&nbsp;<textarea rows="5" cols="50" ng-model="value"></textarea>
<button ng-click="addstatus()">Click to Add!</button>
<br><br><br>
    <table>
        <tr ng-repeat="add in statushow">
                    <td><h3>{{add.value}}</h3>
                     <input ng-model="commentvalue" type="text" size="40" placeholder="Enter your comment here!"></input>
                     &nbsp;&nbsp;&nbsp;
                     <button ng-click="addcomment()">Add comment!</button>
                        <table>
                        <tr ng-repeat="comms in comments">
                        <td><h4>{{comms.commentvalue}}</h4></td></tr></table>

                    </td>


        </tr>
    </table>
    {{commentvalue}}
    </div>

Answer 1

尝试使用此http://jsfiddle.net/rrfqaf9L/2/：

<div ng-app="myApp" ng-controller="userCtrl">

<h2>Status!</h2>
&nbsp;&nbsp;&nbsp;Post status here :
<br>&nbsp;&nbsp;&nbsp;
<textarea rows="5" cols="50" ng-model="value"></textarea>
<button ng-click="addstatus()">Click to Add!</button>
<br>
<br>
<br>
<table>
    <tr ng-repeat="add in statushow">
        <td>
            <h3>{{add.value}}</h3>

            <input ng-model="add.commentvalue" type="text" size="40" placeholder="Enter your comment here!"></input>&nbsp;&nbsp;&nbsp;
            <button ng-click="addcomment(add)">Add comment!</button>
            <table>
                <tr ng-repeat="comms in add.comments">
                    <td>
                        <h4>{{comms.commentvalue}}</h4>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>{{commentvalue}}</div>

使用Javascript：

var app = angular.module('myApp', [])
app.controller('userCtrl', function($scope) {
$scope.statushow = [];

$scope.addcomment= function(add){
    if (typeof add.comments == 'undefined') add.comments = [];
    add.comments.push({
        commentvalue: add.commentvalue
    });
    add.commentvalue="";
};

$scope.addstatus= function(){
    $scope.statushow.push({
        value: $scope.value
    });
    $scope.value="";
};

});

Answer 2

建议不要使用特定关键字，例如add，value作为模型或变量名称。

您可以通过函数将模型作为参数发送：

<textarea rows="5" cols="50" ng-model="status"></textarea>
<button ng-click="addstatus(status)">Click to Add!</button>

    <table>
        <tr ng-repeat="stat in statushow">
            <td><h3>{{stat.value}}</h3>
               <input ng-model="commentvalue" type="text" size="40" placeholder="Enter your comment here!"></input>
                <button ng-click="addcomment(commentvalue)">Add comment!</button>
         <table>
            <tr ng-repeat="comms in comments">
                <td><h4>{{comms.commentvalue}}</h4></td></tr></table>

           </td>
        </tr>
    </table>
    {{commentvalue}}
    </div>

将控制器修改为：

$scope.addcomment= function(comment){
        $scope.comments.push({
            commentvalue: comment
        });
    };

    $scope.addstatus= function(status){
        $scope.statushow.push({
            statusvalue: status
        });
    };

请参阅小提琴：http://jsfiddle.net/HB7LU/15033/

Answer 3

最快捷的方法是更改以下内容并添加$parent。 NG-Repeat创建子范围，因此输入框没有添加正确的范围。

<input ng-model="$parent.commentvalue" type="text" size="40" placeholder="Enter your comment here!"></input>

这是代码笔。 http://codepen.io/shuffguy/pen/gpezOM?editors=101

在ng-repeat中推动Ng模型中的值

3 个答案: