Angular JS:更新$Scope.数组通过用户输入

Angular JS: Updating $Scope.Array through user input

本文关键字：用户 输入 数组 Scope JS 更新 Angular      更新时间：2023-09-26

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

在前端-有一个单一的文本输入字段-当提交时，调用一个函数将该输入推入$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对象或数组?

尝试为输入框定义一个$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>

你所需要做的就是更新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>

相关文章：