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

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

帮个忙..提前感谢

- swati kiran

---

不要使用Angularjs和switch等任何真正的MVVM框架，你就会没问题了。 - Jurion

展示你的控制器代码。 - Ubiquitous Developers

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>

在 AngularJS 网站上有一个工作示例这里。

Mongoose

如果您想使用类似 JSON 的数据结构（BSON 是 MongoDB 实际使用的格式），则应该使用 Express 包 Mongoose。这里是一个链接到非常有用和详尽的文档的网址。

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

Firebase

或者，您可以使用像 Firebase 这样的东西。这里是一个链接。然后，只需创建一个工厂，使其调用 Firebase 进行 HTTP 请求以获取所需的数据。

然后，在控制器中将该数据设置为$scope，并将其添加到您的 HTML 视图中。

如果您没有或很少后端经验，这是我认为设置最快的方法。

祝您好运。

- Joe Lloyd

---

你有一个模式，然后跳到控制器和视图。你使用mongoose和mongodb吗？你没有服务/工厂来获取或发布。你没有显示后端路由。你有一个完整的堆栈还是只有视图和“模式”？如果有，请链接项目的github存储库。 - Joe Lloyd

请看这个链接：http://stackoverflow.com/questions/35654142/how-should-i-create-controller-and-view-page-in-angularjs-with-group-values-mong - swati kiran

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，这是不正确的。 应该使用同一个变量。希望这可以帮到你。

- Hemant Kabra