Angular JS：通过用户输入更新 $Scope.Array答案

【问题标题】：Angular JS: Updating $Scope.Array through user inputAngular JS：通过用户输入更新 $Scope.Array
【发布时间】：2016-10-30 06:36:05
【问题描述】：

我创建了一个简单的 Angular 应用程序 - 它包含一个字符串数组。

在前端 - 有一个单独的文本输入字段 - 当提交时，它会调用一个函数，该函数应该将此输入推送到 $scope.array。

$scope.array 的所有值都输出在同一页面上，位于文本输入区域下方。

我希望将最新的输入与前端的其余数组值输出一起显示 - 本质上，这是一个使用 angular 进行 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 = '';

    };

});

除此之外 - 是否建议在使用 angular 时直接使用 JSON 对象或数组？

【问题讨论】：

标签： javascript angularjs arrays data-binding

【解决方案1】：

尝试为输入框定义一个$scope变量，并将push值添加到播放器对象的name属性中，

控制器

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

});

HTML：

<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

【讨论】：

【解决方案2】：

您只需要更新 updatePlayer 签名，删除方法参数并从输入文本框的 ng-model 中读取它。

这是修改后的解决方案。

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>

【讨论】：