Angular JS：ユーザー入力で$ Scope.Arrayを更新する

私は、文字列の配列を保持する単純な角型アプリケーションを作成しました。

フロントエンドには、単一のテキスト入力フィールドがあります。このフィールドは、送信時にこの入力を$ scope.arrayにプッシュする関数を呼び出します。

$ scope.arrayのすべての値は、テキスト入力領域の下の同じページに出力されます。

最後の入力がフロントエンドの残りの配列値出力と共に表示されることを望みます。本質的には、角度付き2ウェイバインディングの例を扱っています。

ただし、入力値を送信すると、フロントエンドで出力が更新されず、なぜ表示されません。以下のコードの例をご覧ください：

<!DOCTYPE html> 
<html ng-app="App"> 
    <head> 
     <title>First app - CRUD</title> 
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script> 
      <script src="js/app.js"></script> 
     <style></style> 
    </head> 

    <body> 

     <div class="header" align="center"> 
      <h1>CRUD Application v1</h1> 
     </div> 

     <div ng-controller="ctrl1" class="main"> 

      Name: <input type="text" ng-model="players.name"> 
      <button ng-click="updateValue()">submit data</button> 
      <br><br> 

      <p>{{players.name}}</p> 


      <p ng-repeat="player in players" ng-model="players.name" class="main"> 
       {{player.name}} 
      </p> 


     </div> 

</body> 


var app = angular.module('App', []); 
app.controller('ctrl1', function ($scope){ 

    //$scope.name = ' '; 

    //$scope.players = {"alonso", "gerrard"}; 

    $scope.players = [{name:'alonso'}, {name:'gerrard'}]; 


    $scope.updateValue = function(players){ 

     // take input value and add to collection. 
     // send collection via ajax to server 


     $scope.players.push(players.name); 
     $scope.name = ''; 

    }; 

});

さらに、角を使用する場合、JSONオブジェクトまたは配列で直接作業することをお勧めしますか？

出典

2016-10-30 Catresl

HTML

コントローラ

$scope.players = [{ 
    name: 'alonso' 
    }, { 
    name: 'gerrard' 
    }]; 
    $scope.newplayer = ''; 
    $scope.updateValue = function() { 
    $scope.players.push({ 
     name: $scope.newplayer 
    }); 
    }; 

});

、入力ボックスの$スコープ変数を定義し、プレイヤオブジェクトのnameプロパティに値をプッシュ追加してください：

<body> 
    <div class="header" align="center"> 
    <h1>CRUD Application v1</h1> 
    </div> 
    <div ng-controller="ctrl1" class="main"> 
    Name: 
    <input type="text" ng-model="newplayer"> 
    <button ng-click="updateValue()">submit data</button> 
    <br> 
    <br> 
    <p>{{players.name}}</p> 
    <p ng-repeat="player in players" class="main"> 
     {{player.name}} 
    </p> 
    </div> 
</body>

DEMO

出典

2016-10-30 06:59:06 Sajeetharan

あなたは歓迎されている@JCIreそれは – Catresl

ありがとう – Sajeetharan

必要なのは、updatePlayer署名を更新するメソッドの引数を削除し、入力されたテキストボックスのNG-モデルからそれを読むことです。

ここには変更された解決策があります。

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

 
app.controller("sampleController", ["$scope", 
 
    function($scope) { 
 

 
    $scope.players = [{ 
 
     name: 'alonso' 
 
    }, { 
 
     name: 'gerrard' 
 
    }]; 
 

 
    $scope.updateValue = function() { 
 

 
     $scope.players.push({ 
 
     name: $scope.playersName 
 
     }); 
 
     $scope.playersName = ''; 
 

 
    }; 
 
    } 
 
]);

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script> 
 
<div ng-app="sampleApp"> 
 
    <div ng-controller="sampleController"> 
 
    <div class="header" align="center"> 
 
     <h1>CRUD Application v1</h1> 
 
    </div> 
 
    <div class="main"> 
 
     Name: 
 
     <input type="text" ng-model="playersName"> 
 
     <button ng-click="updateValue()">submit data</button> 
 
     <p ng-repeat="player in players" ng-model="players.name" class="main"> 
 
     {{player.name}} 
 
     </p> 
 
    </div> 
 
    </div> 
 
</div>

出典

2016-10-30 07:06:19 Sreekanth

はあなたにスリーカンスに感謝助けている場合upvote、Sajeetharan – Catresl

Angular JS：ユーザー入力で$ Scope.Arrayを更新する

答えて

関連する問題