在 angular js 中提交和更新视图时更新范围变量

Question

我正在 angularjs 创建我的第一个网络应用程序，一旦用户在输入框中提交 text/numbers，我就无法让页面更新新值。

我正在使用 Java8、MongoDB、angularJS 和推特 bootstrap

HTML:

<td>
  <input type="text" class="form-control" placeholder="enter bugnumber" data-ng-model="auditdata.newbugnumber"> 

  <h4>Bug Numbers</h4>

  <a href="{{bugLink(a)}}" data-ng-repeat="a in parseBug(auditdata.bugnumber) track by $index">{{a}}</a>

</td>

<td>
  <button type="submit" data-ng-click="add(auditdata)" class="btn btn-danger" >Save</button>
</td>

在上面的 HTML 中，我从 ng-model=auditadata.newbugnumber 中的用户那里获取输入，但在服务器端，它仍然在 bugnumber 字段中得到更新。 newbugnumber 字段就像一个临时变量，仅用于将新数据发送到服务器。使用临时变量的原因是为了避免在 angularjs.

中进行双向绑定

我尝试在下面的 JS 中使用 $apply()、$watch 和 digest，但无法在视图中获取要更新的值。数据在视图中更新的唯一方法是当我重新加载页面时，这不是一个选项

app.controller('listCtrl', function ($scope, $http,$route) {

$scope.isCollapsed = true; 


$http.get('/api/v1/result').success(function (data) {
    $scope.audit = data;   

}).error(function (data, status) {
    console.log('Error ' + data);
})


$scope.add= function(bugInfo) {

     $http.post('/api/v1/result/updateBug', bugInfo).success(function (data) {
             bugInfo.newbugnumber='';
             console.log('audit data updated');

         }).error(function (data, status) {
             console.log('Error ' + data);
         }
   };   
});

服务器端更新功能

public void updateAuditData(String body) {

        Result updateAudit = new Gson().fromJson(body, Result.class);
        audit.update(
                new BasicDBObject("_id", new ObjectId(updateAudit.getId())),
                new BasicDBObject("$push", new BasicDBObject().append("bugnumber",
                        updateAudit.getNewbugnumber())));
    }

在集合中归档的 bugnumber 是怎样的

> db.audit.find({"_id" : ObjectId("5696e2cee4b05e970b5a0a68")})
{
        "bugnumber" : [
                "789000",
                "1212"
        ]
}

Answer 1

根据您的评论，执行以下操作：

将所有 $http 处理放在服务或工厂中。这是一个很好的做法，可以使重用和测试更容易

app.factory('AuditService', function($http) {
  var get = function() {
    return $http.get("/api/...") // returns a promise
  };

  var add = function() {
    return $http.post("/api/...") // returns a promise
  };

  return {
    get: get,
    add: add
  }
});

然后在你的控制器中

// note the import of AuditService
app.controller('listCtrl', function ($scope, $http,$route, AuditService) { 

// other code here


// If insert is successful, then update $scope by calling the newly updated collection. 
// (this is chaining the events using then())
$scope.add = function(bugInfo) {
  AuditService.add().then(
    function(){ // successcallback
      AuditService.get().then(
        function(data){ // success
          $scope.audit = data; 
        },
        function(){ // error
          console.log('error reading data ' + error)
        })
    },
    function(error){ // errorcallback
      console.log('error inserting data ' + error)
    })  
});

相同的方法可以应用于所有 CRUD 操作

在 angular js 中提交和更新视图时更新范围变量

update scope variable on submit and update view in angular js

javascript

java

twitter-bootstrap

angularjs

angular-ui-bootstrap