web-dev-qa-db-fra.com

Comment pousser un objet dans un tableau en utilisant AngularJS

J'essaie d'utiliser la fonction angular Push, mais cela ne fonctionne pas.

Je veux ajouter des chaînes (ou des objets) dans un tableau.

J'ai cherché des exemples basiques ici à Stack Overflow mais je ne les ai pas trouvés.

Quelqu'un peut-il corriger mon code ou écrire un exemple très basique?

Voici mon exemple.

Ceci est le code HTML:

<form ng-controller="TestController as testCtrl ng-submit="testCtrl.addText(myText)">
    <input type="text" value="Lets go">
    <button type="button">Add</button>
</form>

Ceci est le Java code du script:

(function() {
    var app = angular.module('test', []);

    app.controller('TestController', function() {
        this.arrayText = {
            text1: 'Hello',
            text2: 'world',
        }

        this.addText = function(text) {
            arrayText.Push(this.text);
        }
    });
})();
javascriptarraysangularjsfunction
31
Roby Sottini

Push fonctionne seulement pour array.

Transformez votre objet arrayText en objet Array.

Essayez comme ça

JS

this.arrayText = [{
  text1: 'Hello',
  text2: 'world',
}];

this.addText = function(text) {
  this.arrayText.Push(text);
}
this.form = {
  text1: '',
  text2: ''
};

HTML

<div ng-controller="TestController as testCtrl">
  <form ng-submit="addText(form)">
    <input type="text" ng-model="form.text1" value="Lets go">
    <input type="text" ng-model="form.text2" value="Lets go again">
    <input type="submit" value="add">
  </form>
</div>
32
Anik Islam Abhi

Veuillez vérifier ceci - http://plnkr.co/edit/5Sx4k8tbWaO1qsdMEWYI?p=preview

Manette-

var app= angular.module('app', []);

app.controller('TestController', function($scope) {
    this.arrayText = [{text:'Hello',},{text: 'world'}];

    this.addText = function(text) {

      if(text) {
        var obj = {
          text: text
        };
          this.arrayText.Push(obj);
          this.myText = '';
          console.log(this.arrayText);
        }
      } 
 });

HTML

<form ng-controller="TestController as testCtrl" ng-submit="testCtrl.addText(testCtrl.myText)">
        <input type="text" ng-model="testCtrl.myText" value="Lets go">
        <button type="submit">Add</button>
        <div ng-repeat="item in testCtrl.arrayText">
            <span>{{item}}</span>
        </div>
</form>
12
User2

'Push' est pour les tableaux.

Vous pouvez faire quelque chose comme ça:

app.js:

(function() {

var app = angular.module('myApp', []);

 app.controller('myController', ['$scope', function($scope) {

    $scope.myText = "Let's go";

    $scope.arrayText = [
            'Hello',
            'world'
        ];

    $scope.addText = function() {
        $scope.arrayText.Push(this.myText);
    }

 }]);

})();

index.html

<!doctype html>
<html ng-app="myApp">
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    <script src="app.js"></script>
  </head>
  <body>
    <div>
      <form ng-controller="myController" ng-submit="addText()">
           <input type="text" ng-model="myText" value="Lets go">
           <input type="submit" id="submit"/>
           <pre>list={{arrayText}}</pre>
      </form>
    </div>
  </body>
</html>
7
jreyes
  var app = angular.module('myApp', []);
        app.controller('myCtrl', function ($scope) {

            //Comments object having reply oject
            $scope.comments = [{ comment: 'hi', reply: [{ comment: 'hi inside commnet' }, { comment: 'hi inside commnet' }] }];

            //Push reply
            $scope.insertReply = function (index, reply) {
                $scope.comments[index].reply.Push({ comment: reply });
            }

            //Push commnet
            $scope.newComment = function (comment) {
                $scope.comments.Push({ comment:comment, reply: [] });
            }
        });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">

        <!--Comment section-->
        <ul ng-repeat="comment in comments track by $index" style="background: skyblue; padding: 10px;">
            <li>
                <b>Comment {{$index}} : </b>
                <br>
                {{comment.comment}}
                <!--Reply section-->
                    <ul ng-repeat="reply in comment.reply track by $index">
                        <li><i>Reply {{$index}} :</i><br>
                            {{reply.comment}}</li>
                    </ul>
                <!--End reply section-->
                <input type="text" ng-model="reply" placeholder=" Write your reply." /><a href="" ng-click="insertReply($index,reply)">Reply</a>
            </li>
        </ul>
        <!--End comment section -->
            

        <!--Post your comment-->
        <b>New comment</b>
        <input type="text" placeholder="Your comment" ng-model="comment" />
        <a href="" ng-click="newComment(comment)">Post </a>
    </div>
4
Arun Kumar Saini

Quelques réponses qui devraient fonctionner ci-dessus, mais voici comment je l'écrirais.

En outre, je ne déclarerais pas les contrôleurs à l'intérieur de modèles. Il vaut mieux les déclarer sur vos routes imo.

add-text.tpl.html

<div ng-controller="myController">
    <form ng-submit="addText(myText)">
        <input type="text" placeholder="Let's Go" ng-model="myText">
        <button type="submit">Add</button>
    </form>
    <ul>
        <li ng-repeat="text in arrayText">{{ text }}</li>
    </ul>
</div>

app.js

(function() {

    function myController($scope) {
        $scope.arrayText = ['hello', 'world'];
        $scope.addText = function(myText) {
             $scope.arrayText.Push(myText);     
        };
    }

    angular.module('app', [])
        .controller('myController', myController);

})();
3
Joshua Kelly

Vous devriez essayer de cette façon. Cela fonctionnera certainement.

(function() {

var app = angular.module('myApp', []);

 app.controller('myController', ['$scope', function($scope) {

    $scope.myText = "Object Push inside ";

    $scope.arrayText = [

        ];

    $scope.addText = function() {
        $scope.arrayText.Push(this.myText);
    }

 }]);

})();

Dans votre cas, $scope.arrayText est un objet. Vous devriez initialiser comme un tableau.

2
laxmikant yadav