在角JS编程方式插入数组值 [英] Programmatically inserting array values in Angular JS

问题描述

我有一个绑定到我的UI的角度JS数组。当我通过用户界面添加项目到它，它工作正常，我的UI与新添加的产品的更新。所以，这code工作...

I have an Angular JS array that is bound to my UI. When I add an item to it via the UI, it works fine and my UI is updated with the newly added item. So, this code works...

//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

Here is the 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上这些更改。

However, I am having trouble understanding how can I add a new item programmatically and see those changes on the UI.

从本质上讲，在code段的订阅（）函数监听外部事件，需要在列表中插入一个项目编程/更新UI，是行不通的。

Essentially, the subscribe() function in the code snippet is listening for external events and needs to insert an item in the list programmatically / update the UI, is not working.

我一直在寻找了一段时间，并试图从SO和其他地方不同的例子，但我不能让它为这个简单的找工作的情况下。任何指针或指导将AP preciated。

I have been looking for a while and tried various examples from SO and elsewhere, but I cannot get it to work for this rather simple looking case. Any pointers or guidance will be appreciated.

谢谢！

推荐答案

在上面的问题更新...但想通，我应该提犯错误code和这里的工作版本....

Updated in the question above...but figured I should mention the erring code and the working version here....

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

这篇关于在角JS编程方式插入数组值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！