将输入推送到阵列并清除输入不按预期工作

时间:2021-07-01 03:16:27

I have a controller which fetches data from a factory, as follows:

我有一个从工厂获取数据的控制器,如下所示:

.controller('ChatDetailCtrl', function($scope, $stateParams, Messages) {
  $scope.messages = Messages.get($stateParams.partnerId);
  $scope.send = function (input) {
    input.id = Math.random();
    input.sent = true;
    input.time = new Date();
    $scope.messages.data.push(input);
    console.log($scope.messages);
  }
})

I use an ng-repeat to display the messages on the template. I then have an input which uses ng-click to run send. The problem is, when you send it then its added to the array, however if you carry on typing then it updates the sent message, rather than allowing you to send a new one.

我使用ng-repeat来显示模板上的消息。然后我有一个输入,使用ng-click运行发送。问题是,当你发送它然后它添加到数组,但是如果你继续输入然后它更新发送的消息,而不是允许你发送一个新消息。

How can I pass the input to the array, in a way which allows me to repeat it many times?

如何以一种允许我重复多次的方式将输入传递给数组?

2 个解决方案

#1


1  

try using angular.copy so that you are not pushing the same reference but an entirely new object similar to input

尝试使用angular.copy,这样你就不会推送相同的引用,而是一个类似于输入的全新对象

.controller('ChatDetailCtrl', function($scope, $stateParams, Messages) {
  $scope.messages = Messages.get($stateParams.partnerId);
  $scope.send = function (input) {
    input.id = Math.random();
    input.sent = true;
    input.time = new Date();
    $scope.messages.data.push(angular.copy(input));
    console.log($scope.messages);
  }
})

#2


0  

Without having seen your markup and/or the structure of input, this here does the trick:

在没有看到你的标记和/或输入结构的情况下,这就是诀窍:

JsBin: http://jsbin.com/xevabevi/10/edit

JsBin:http://jsbin.com/xevabevi/10/edit

Like Charminbear said, you need to clear the input data some way, after pushing to the messages array.

像Charminbear所说,在推送到messages数组后,你需要以某种方式清除输入数据。

Alternatively, you could do the following in the push:

或者,您可以在推送中执行以下操作:

$scope.arr.push(angular.copy(input));

That way you wouldn't push the input data to the array, rather you would push a copy of it. This wouldn't clear your input fields however, as the original input would stay intact.

这样你就不会将输入数据推送到数组,而是推送它的副本。但是,这不会清除您的输入字段,因为原始输入将保持不变。

#1


1  

try using angular.copy so that you are not pushing the same reference but an entirely new object similar to input

尝试使用angular.copy,这样你就不会推送相同的引用,而是一个类似于输入的全新对象

.controller('ChatDetailCtrl', function($scope, $stateParams, Messages) {
  $scope.messages = Messages.get($stateParams.partnerId);
  $scope.send = function (input) {
    input.id = Math.random();
    input.sent = true;
    input.time = new Date();
    $scope.messages.data.push(angular.copy(input));
    console.log($scope.messages);
  }
})

#2


0  

Without having seen your markup and/or the structure of input, this here does the trick:

在没有看到你的标记和/或输入结构的情况下,这就是诀窍:

JsBin: http://jsbin.com/xevabevi/10/edit

JsBin:http://jsbin.com/xevabevi/10/edit

Like Charminbear said, you need to clear the input data some way, after pushing to the messages array.

像Charminbear所说,在推送到messages数组后,你需要以某种方式清除输入数据。

Alternatively, you could do the following in the push:

或者,您可以在推送中执行以下操作:

$scope.arr.push(angular.copy(input));

That way you wouldn't push the input data to the array, rather you would push a copy of it. This wouldn't clear your input fields however, as the original input would stay intact.

这样你就不会将输入数据推送到数组,而是推送它的副本。但是,这不会清除您的输入字段,因为原始输入将保持不变。