Jak przesuwać obiekt do tablicy za pomocą AngularJS

Próbuję użyć funkcji wcięcia kątowego, ale nie działa.Jak przesuwać obiekt do tablicy za pomocą AngularJS

Chcę dodać ciągi (lub obiekty) do tablicy.

Szukałem tutaj podstawowych przykładów w Stack Overflow, ale nie mogłem go znaleźć.

Czy ktoś może poprawić mój kod lub napisać bardzo prosty przykład?

Oto mój przykład.

Jest to kod HTML:

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

Jest to kod Java Script: działa tylko

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

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

     this.addText = function(text) { 
      arrayText.push(this.text); 
     } 
    }); 
})();

Źródło

2015-05-27 Roby Sottini

Nie wiesz, o co prosisz, ale 'this.arrayText' jest obiekt, nie ma' push', a to nie to samo, co po prostu 'arrayText'? – adeneo

push na tablicy.

Złóż swój obiekt arrayText do obiektu Array.

Spróbuj Ci się to

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>

Źródło

2015-05-27 14:02:13

Typ przycisku należy przesłać. – User2

dzięki za informacje –

'Push' jest dla tablic.

można zrobić coś takiego:

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>

Źródło

2015-05-27 14:26:09 jreyes

Proszę zaznaczyć to - http://plnkr.co/edit/5Sx4k8tbWaO1qsdMEWYI?p=preview

Controller

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>

Źródło

2015-05-27 14:49:42 User2

Kilka odpowiedzi, które powinny pracować powyżej, ale jest to w jaki sposób mogę to napisać.

Ponadto, nie deklarowałbym kontrolerów wewnątrz szablonów. Lepiej zadeklarować je na swoich trasach imo.

dodatek 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); 

})();

Źródło

2015-05-28 04:06:01

Należy spróbować w ten sposób. To na pewno zadziała.

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

}]); 

})();

W twoim przypadku $scope.arrayText to obiekt. Powinieneś zainicjować jako tablicę.

Źródło

2016-07-27 14:11:52

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>

Źródło

2016-09-23 17:18:33

Jak przesuwać obiekt do tablicy za pomocą AngularJS

Odpowiedz

Powiązane problemy