Я пытаюсь создать тип комментария статуса системы, используя 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>
Post status here :<br>
<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>
<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="";
};
});
Попробуйте это http://jsfiddle.net/rrfqaf9L/2/:
<div ng-app="myApp" ng-controller="userCtrl">
<h2>Status!</h2>
Post status here :
<br>
<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>
<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="";
};
});
Было бы предположение не использовать конкретные ключевые слова, такие как 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/
Самый быстрый способ сделать это - изменить следующее и добавить $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