Angular не следит за масивом

192

02 мая 2018, 04:34

Здравствйете, возникла такая проблема, есть код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html  ng-app="phonecatApp">
    <head>
        <title>GredTech</title>
        <link rel="stylesheet" type="text/css" href="css//style.css">
        <script type="text/javascript" src="jquery-3.2.1.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
        <meta charset="utf-8">

        <script type="text/javascript">


            var journal = [];


            function addEntry2(name,pay,test) {
                journal.push({
                    name: name,
                    pay: pay,
                    test: test  
                });
            }
                addEntry2("001",150,1);     
                addEntry2("002",150,2);
                addEntry2("003",150,3);
                addEntry2("004",100,4);
                addEntry2("005",100,5);




            var phonecatApp = angular.module('phonecatApp', []);
            phonecatApp.controller('PhoneListCtrl', function($scope){
                $scope.phones = journal;
            });

            $(document).ready( function () {
                $("#add").bind("click", may1); 
            });
            function may1 () {
                var a = $('#addF').val();
                addEntry2(a,a,a);
                console.log(journal);
            };


        </script>
    </head>
    <body ng-controller="PhoneListCtrl">

        <div id="spisok">
            <ul ng-repeat="phone in phones">
                <li>{{phone.name}}</li>

            </ul>
        </div>
        <input id="addF" type="text"/>
        <button id="add">+</div>
    </body> 
</html>

При клике на кнопку я беру значения инпута и помещаю обэкт в масив journal , но автоматического обновления в списку

не происходит, хотя через консоль вывожу масив и он увеличивается, в чем пробела?

Answer 1

Не Знаю зачем вы так все усложняете

var phonecatApp = angular.module('phonecatApp', []); 
phonecatApp.controller('PhoneListCtrl', function($scope){ 
  $scope.name = ""; 
  $scope.phones = []; 
  $scope.addToList = function() { 
    this.phones.push({ 
      name: this.name 
    }) 
  } 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
<body ng-controller="PhoneListCtrl" ng-app="phonecatApp"> 
  <div id="spisok"> 
    <ul ng-repeat="phone in phones"> 
      <li>{{phone.name}}</li> 
    </ul> 
  </div> 
  <input ng-model="name" type="text"/> 
  <button ng-click="addToList()">+</button> 
</body>