双向数据结合

Question

如果我有这样的架构..
我的视图页输入字段怎么样......

name:{ type:String}
personnel:{
    sales: { type:String},
    account: { type:String}
}

无法从视图页面插入或获取这样的数据。

<!--to insert-->
name:<input type="text" ng-model="clients.name">
personal:    
Sales:<input type="text" ng-model="clients.Personnel.salesExec">
account:<input type="text" ng-model="clients.Personnel.account">

<!--to retrive-->
<tr ng-repeat="clients in clientsList">
    <td>{{clients.name}}</td>
    <td>{{clients.personnel.sales}}</td>
    <td>{{clients.personnel.account}}</td>
</tr>

在我的控制器中我有：

var clientsApp = angular.module('clientOn');

clientsApp.controller('controllerMain', ['$scope', '$http',
    function($scope, $http) {

        console.log("controller invoked");

  //acts as get all data
  var refresh = function() {
    $http.get('/clients').success(function(response) {
        console.log("I got the data I requested");
        $scope.clientsList = response;
        $scope.clients = "";
        });
  };
  refresh();


//add data
$scope.addclients = function(){
    console.log($scope.clients);
    $http.post('/clients',$scope.clients).success(function(response) {
        console.log(response);
        refresh();
    });
};
      })

帮助...提前感谢

Answer 1

双向数据结合

Angular JS网站上的这段代码片段显示了输入和输出的双向数据绑定

<div ng-controller="ExampleController">
  <form novalidate class="simple-form">
    Name: <input type="text" ng-model="user.name" /><br />
    E-mail: <input type="email" ng-model="user.email" /><br />
    Gender: <input type="radio" ng-model="user.gender" value="male" />male
    <input type="radio" ng-model="user.gender" value="female" />female<br />
    <input type="button" ng-click="reset()" value="Reset" />
    <input type="submit" ng-click="update(user)" value="Save" />
  </form>
  <pre>user = {{user | json}}</pre>
  <pre>master = {{master | json}}</pre>
</div>

<script>
  angular.module('formExample', [])
  .controller('ExampleController', ['$scope', function($scope) {
    $scope.master = {};

    $scope.update = function(user) {
      $scope.master = angular.copy(user);
    };

    $scope.reset = function() {
      $scope.user = angular.copy($scope.master);
    };

    $scope.reset();
  }]);
</script>

在角度js网站上有一个工作示例here。

猫鼬

如果你想使用类似JSON的模式数据（BSON是mongodb实际使用的），你应该使用快递包mongoose。 Here是指向精彩文档的链接，非常有用且彻底。

但是为此你需要设置一个完整的堆栈（MEAN堆栈）来将东西放入数据库并检索它们。

火力地堡

或者你可以使用类似火基的东西。 Here是一个链接。您所要做的就是创建一个工厂，对firebase进行http调用以获取所需的数据。

然后将数据设置为控制器中的$scope并将其添加到html视图中。

如果你几乎没有后端exp，这是设置imo的最快方法。

祝你好运。

Answer 2

使用以下代码替换现有代码：

<!--to insert-->
name:<input type="text" ng-model="clients.name">
personal:    
Sales:<input type="text" ng-model="clients.Personnel.salesExec">
account:<input type="text" ng-model="clients.Personnel.account">

<!--to retrive-->
<tr ng-repeat="clients in clientsList">
    <td>{{clients.name}}</td>
    <td>{{clients.Personnel.salesExec}}</td>
    <td>{{clients.Personnel.account}}</td>
</tr>

您的代码中存在小写和大写的区别。同样对于销售，您在获取数据时使用clients.Personnel.salesExec，但在显示数据时使用clients.personnel.sales，这是不正确的。它应该是相同的变量。希望这会对你有所帮助。

Angularjs单个字段集中的多个字段

2 个答案:

双向数据结合

猫鼬

火力地堡