从多个数据源填充AngularJS表单

时间:2014-07-13 01:37:11

标签: angularjs

我有一个控制器,可以将个人数据(姓名,身份证,出生日期等)作为单独的字段返回,我有一个显示此数据并允许编辑它的角形表格,到目前为止一直很好

问题是其中一个字段是" country",我想在所有国家/地区添加一个下拉组合,供最终用户选择一个。

如何在所有国家/地区填充该组合?我应该提供同一个控制器中返回该人数据的所有国家/地区吗?或者我是否有一个单独的控制器返回所有国家/地区的列表,并以某种方式将该人员的国家/地区字段链接到另一个控制器返回的完整国家/地区列表?

1 个答案:

答案 0 :(得分:1)

这是一个架构问题。这取决于。如果要从两个可以完成的单独调用中填充表单。如果你想从一次通话中填充它也不是问题。这确实是一个主观的选择。如果你想使用两个电话,你可以这样做:

app.controller('PersonController', ['$scope', function($scope) {
    $scope.loadPerson = function() {
        $http.get('/person', { params: { personId: personId } } ).success( function( result ) {
            if( result.success ) {
                $scope.person = result.person;
            }
        });
    };

    $scope.loadCountries = function() {
        $http.get('/countries').success( function( result ) {
            if( result.success ) {
               $scope.countries = result.countries;
            }
        });
    };

    $scope.loadPerson();
    $scope.loadCountries();
};

观点:

<html>
   <body>
       <form ...>
          <label>Name</label>
          <input ng-model="person.name"/>
          <label>Country</label>
          <select ng-selected="person.country" ng-options="country.name for country in counties"></select>
       </form>
   </body>
</html>

现在你应该这样做吗?那么它增加了去服务器的呼叫数量。如果它只是这两个,可能不是什么大不了的事。但是,作为一般规则,如果您可以减少往返次数,这将使您的网站更快地执行。当你的人物物体到达时,你的国家选择就会到来。这减少了一个到达另一个之前的问题。好消息是angular处理了无序数据引起的正常问题。它从重大问题到小问题。在这些问题中,往返是最重要的。

分离这些调用可以更轻松地跨多个表单重用调用。有时,打破电话并进行多次往返更容易,因为将额外数据放入每次通话都很繁琐。但是,将它们分开的更大理由是,在角度服务中以多种形式缓存国家会更容易。这可能是将它们分开的主要原因是你可以召唤一次国家并将其缓存到客户端。然后多次打电话来拉下不同的人,而不会多次转移国家。最后,它可以减少多次通话之间的数据,同时在一开始就进行额外的往返行程。