Javascript 以编程方式在Angular JS中插入数组值 更新：我可以通过改变调用push方法的方式来解决这个问题。请参阅代码段中的内联注释。非常感谢你的帮助。如果您对这不是一个好主意的原因有任何意见/想法，我们将不胜感激。

我有一个绑定到UI的角度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>

//对addItem的基于HTML UI的调用起作用，UI更新以反映新数据。
地位：
优先事项摘要：
{{item.priority\u summary}
{{item.type}

下面是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();

var-app=angular.module（'DemoApp'，[]）；
var controll=app.controller（“主控制器”，函数（$scope）{
$scope.items=[{
“状态”：“新”，
“优先级汇总”：“高”
}, {
“状态”：“新”，
“优先级汇总”：“高”
}, {
“状态”：“新”，
“优先级汇总”：“高”
}, {
“状态”：“新”，
“优先级汇总”：“高”
}];
$scope.addItem=函数（项）
{
警报（“被调用的附加项”）；
$scope.items.push（项目）；
$scope.item={}；
}
$scope.subscribe=函数（）{
//用于连接到终结点的代码。。。
警报（“接收到的事件”）；//我们收到此警报，因此事件被正确接收。
//***此代码（items.push（item）不起作用
//我们不会更新UI以显示新添加的项。
/*评论-非工作
item.status=“新建”；
item.priority_summary=“高”；
$scope.items.push（项目）；
//$scope.$apply（）；
});*/
//工作代码。。。。
$scope.items.push({
状态：'新'，
优先权摘要：“H”
});
$scope.$apply（）；
}
//正在控制器初始化时调用订阅。。。
$scope.subscribe（）；

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

实际上，代码段中的subscribe（）函数正在侦听外部事件，需要以编程方式在列表中插入项/更新UI，但该函数不起作用

我已经寻找了一段时间，并尝试了来自SO和其他地方的各种例子，但我无法让它适用于这个看起来相当简单的案例。任何指点或指导都将不胜感激

---

谢谢！

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

//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();

}))

---

无需将newItem从HTML传递到控制器，因为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 = {};
        } 

  }]);

地位：
优先事项摘要：
{{item.priority\u summary}
{{item.status}
.controller（'MyController'，['$scope'，函数（$scope）{
$scope.items=[{
“状态”：“新”，
“优先级汇总”：“高”
}, {
“状态”：“新”，
“优先级汇总”：“高”
}, {
“状态”：“新”，
“优先级汇总”：“高”
}, {
“状态”：“新”，
“优先级汇总”：“高”
}];
$scope.newItem={}；
$scope.addItem=函数（）{
$scope.items.push（$scope.newItem）；
$scope.newItem={}；
} 
}]);

你能添加监听外部事件的代码吗？@AnthonyChu:我添加了订阅功能。因为我有一个关于它的各种值的警报，我知道订阅正在工作。我想我搞乱了如何将数组值添加到Angular和双向绑定中，以确保它在UI上刷新；在您的代码样本中没有必要

item

和

newitem

在

subscribe（）

中指的是什么？subscribe（）中的newitem似乎未定义这两个版本都可以工作（顺便说一句，

$scope.$apply

在这两种语言中都是必需的，以便更新用户界面-最好是将它包装在代码中，而不是在最后调用：

$scope.$apply（function（）{…}）；

）。但是当然，如果我们看不到整个代码，就不可能发现任何问题（例如，

项

从何而来？它看起来像什么？等等）。@ExpertSystem:同意。我可能把我的代码弄乱了，但否则两者都可以工作。感谢您建议将代码包装在

$scope.$apply（函数（）{…}）中

而不是单独调用apply。我将其合并到code.FYI中，这是围绕

$apply（）包装代码的主要好处

就是即使对于Angular上下文之外的代码，您也有Angular的异常处理。谢谢@ExpertSystem。感谢您分享此技巧…我不知道。谢谢，但我对上面代码中的subscribe方法有问题。您上面编写的代码示例在从HTML UI调用时对我有效。我的问题是：问题是如何从另一个JS方法调用向Angular中插入新数据。

<!-- 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 = {};
        } 

  }]);