Question

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

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

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

我希望最新的输入与前端的其余数组值输出一起显示 - 本质上，使用角度的双向绑定示例。

但是，当我提交输入值时，输出不会在前端更新 - 我不明白为什么。请找到以下代码示例：

<!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对象或数组

Answer 1

尝试为输入框定义$ scope变量，并将值添加到播放器对象的 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

Answer 2

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

以下是修改后的解决方案。

＆＃13;

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 = '';

    };
  }
]);

＆＃13;

<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>

＆＃13;

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

2 个答案: