Angular JS: Обновление $ Scope.Array через пользовательский ввод

Я создал простое угловое приложение - которое содержит массив строк.

На переднем конце - есть одно текстовое поле ввода, которое при отправке вызывает функцию, которая должна вставлять этот вход в $ 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 = ''; 

    }; 

});

В дополнение к этому - это рекомендуется непосредственно работать с объектами JSON или массивами при использовании угловой?

источник

2016-10-30 Catresl

Try определить переменную $ простор для ввода и добавления нажмите значение в 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

источник

2016-10-30 06:59:06 Sajeetharan

спасибо Sajeetharan – Catresl

@JCIre вы можете, upvote если он помог – 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

спасибо Срикант – Catresl

Angular JS: Обновление $ Scope.Array через пользовательский ввод

ответ

Смежные вопросы