以编程方式在Angular JS中插入数组值

Question

更新：我能够通过改变调用push方法的方式来解决它。请参阅代码段中的内嵌注释。非常感谢你的帮助。任何关于为什么这不是一个好主意的评论/想法都将受到高度赞赏。

我有一个绑定到我的UI的Angular JS数组。当我通过UI向其添加项目时，它工作正常，我的UI使用新添加的项目进行更新。所以，这段代码有用......

//The HTML UI based call to addItem works and the UI updates to reflect the new data.
    <table>
      <tr>
        <td>Status: </td>
        <td><input type="text" ng-model="item.status" /></td>
      </tr>
      <tr>
        <td>Priority Summary: </td>
        <td><input type="text" ng-model="item.priority_summary" /></td>
      </tr>
      <tr>
        <td colspan="2"><input type="Button" value="Add" ng-click="addItem(item)" /> </td>
      </tr>
    </table>

<div ng-repeat="item in items">        
    <p class="priority">{{item.priority_summary}}</p>
    <p class="type">{{item.type}}</p>
</div>

这是JavaScript

var app = angular.module('DemoApp', []);

<!-- Define controller -->
var contrl = app.controller("MainController", function ($scope) {

$scope.items = [{
    "status": "New",
        "priority_summary": "High"
}, {
    "status": "New",
        "priority_summary": "High"
}, {
    "status": "New",
        "priority_summary": "High"
}, {
    "status": "New",
        "priority_summary": "High"
}];

$scope.addItem = function(item)
{
 alert("addItem called");
 $scope.items.push(item);
 $scope.item = {};
}


  $scope.subscribe = function(){
    //Code for connecting to the endpoint...
    alert("event received"); //We receive this alert, so event is received correctly.

//***This code (items.push(item) is not working 
//and we do not get the UI updated to show the newly added item.
/*Commented - NON WORKING
    item.status = "New";
    item.priority_summary = "High";
    $scope.items.push(item);
   // $scope.$apply();
 });*/

//Working Code....

    $scope.items.push({
      status: 'New',
      priority_summary: 'H'
    });
    $scope.$apply();

    }

  //calling subscribe on controller initialization...
  $scope.subscribe();

但是，我无法理解如何以编程方式添加新项目并在UI上查看这些更改。

本质上，代码片段中的subscribe（）函数正在侦听外部事件，并且需要以编程方式在列表中插入项目/更新UI，无法正常工作。

我一直在寻找一段时间，并尝试过来自SO和其他地方的各种示例，但我不能让它为这个相当简单的案例工作。任何指针或指导将不胜感激。

谢谢！

Answer 1

在上面的问题中更新了...但是我想在这里提到错误的代码和工作版本....

//NON WORKING CODE
//***This code (items.push(item) is not working 
//and we do not get the UI updated to show the newly added item.
    item.status = "New";
    item.priority_summary = "High";
    $scope.items.push(item);
   // $scope.$apply();

}）;

//Working Code....

    $scope.items.push({
      status: 'New',
      priority_summary: 'H'
    });
    $scope.$apply();

Answer 2

无需将HTML中的 newItem 传递给控制器​​，因为 newItem 是 $ scope 变量，控制器已经可以访问它。

以下是工作代码：

<!-- html -->
<div ng-controller="MyController">
  <table>
    <tr>
      <td>Status: </td>
      <td><input type="text" ng-model="newItem.status" /></td>
    </tr>
    <tr>
      <td>Priority Summary: </td>
      <td><input type="text" ng-model="newItem.priority_summary" /></td>
    </tr>
    <tr>
      <td colspan="2"><input type="Button" value="Add" ng-click="addItem()" /> </td>
    </tr>
  </table>


  <div ng-repeat="item in items">        
    <p class="priority">{{item.priority_summary}}</p>
    <p class="type">{{item.status}}</p>
  </div>
</div>

<!-- js -->
 .controller('MyController', ['$scope', function($scope) {
        $scope.items = [{
                        "status": "New",
                            "priority_summary": "High"
                    }, {
                        "status": "New",
                            "priority_summary": "High"
                    }, {
                        "status": "New",
                            "priority_summary": "High"
                    }, {
                        "status": "New",
                            "priority_summary": "High"
                    }];
        $scope.newItem = {};
        $scope.addItem = function(){
            $scope.items.push($scope.newItem);
            $scope.newItem = {};
        } 

  }]);