Толкая значения в моделировании внутри повтора

Question

Толкая значения в моделировании внутри повтора

0

Я пытаюсь создать тип комментария статуса системы, используя angularJS. Первое текстовое поле позволяет пользователю помещать значение в массив и отображать его на странице. При щелчке также можно ввести текстовое поле и кнопку, чтобы ввести комментарий. Однако значение комментария не отображается внутри области. Код:

HTML

<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>

STATUS.JS

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

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

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

});

Aman Taneja 07 июль 2015, в 14:54

Источник

Теги:

javascript

angularjs

angularjs-scope

3 ответа

0

Было бы предположение не использовать конкретные ключевые слова, такие как 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/

Sajal 07 июль 2015, в 11:59

0

Самый быстрый способ сделать это - изменить следующее и добавить $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

OceansOnPluto 07 июль 2015, в 10:58

Ещё вопросы

TlmaK0 · Accepted Answer · 2015-07-07T12-02-00.000Z

Попробуйте это 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="";
};

});