wake-up-neo.net

So schieben Sie ein Objekt mit AngularJS in ein Array

Ich versuche, die angular Push-Funktion zu verwenden, aber es funktioniert nicht.

Ich möchte einem Array Zeichenfolgen (oder Objekte) hinzufügen.

Ich habe hier bei Stack Overflow nach grundlegenden Beispielen gesucht, sie aber nicht gefunden.

Kann jemand meinen Code korrigieren oder ein sehr einfaches Beispiel schreiben?

Hier ist mein Beispiel.

Dies ist der HTML-Code:

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

Dies ist der Java Skriptcode:

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

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

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

Push nur für Array arbeiten.

Machen Sie Ihr arrayText -Objekt zum Array-Objekt.

Versuchen Sie es so

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

Bitte überprüfen Sie dies - http://plnkr.co/edit/5Sx4k8tbWaO1qsdMEWYI?p=preview

Regler-

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' steht für Arrays.

Sie können so etwas tun:

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

Ein paar Antworten, die oben funktionieren sollten, aber so würde ich es schreiben.

Außerdem würde ich keine Controller in Vorlagen deklarieren. Es ist besser, sie auf Ihren Routen zu deklarieren.

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

Sie sollten diesen Weg versuchen. Es wird auf jeden Fall funktionieren.

(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);
    }

 }]);

})();

In deinem Fall $scope.arrayText ist ein Objekt. Sie sollten als Array initialisieren.

2
laxmikant yadav