在工厂内由$ http所做的数据更改未反映到DOM中

我试图根据对象创建动态表单。例如：我想生成选择框将包含选择，如果给定的，否则工厂将使用AJAX获取它们，这样的事情：

标记：

<select ng-repeat="select in selects" 
     ng-init="options = refactor.options(select)" 
     ng-options="option in options"> 
</select>

控制器：

myApp.controller('MyCtrl', function($scope, refactor) { 
    $scope.refactor = refactor; 
    $scope.selects = [ 
      { text: "Country", value="chosen.country", options=["France", "England"] }, 
      { text: "Gender", value="chosen.gender", options="/gender" } 
     ] 
});

工厂：

myApp.factory('refactor', function($scope, $http) { 
    return { 
    options: function(select) { 
     if(typeof(select.options) === 'object') { return select.options }; 
     // otherwise assume select.options is 
     // a path to fetch options by ajax: 
     $http.get(select.options).success(function(data) { 
     select.options = data; // data == ['male', 'female'] 
     }); 

     return []; // placeholder until promise is fulfilled 
    } 
    } 
})

数据（$ scope.selects）克ets按预期更新，但DOM不是，这可能意味着refactor.options（）不会再次被调用以响应更改。我尝试通过将范围对象传递给工厂并调用$ apply来强制更新，但它不起作用。

我错过了什么？

来源

2015-06-20 Kludge

试试这个，如果它的工作原理'NG选项= “select.options中的选项” – Abdul23

在第一次迭代中，opt离子变量是一个字符串（一条路径，'/ gender'），它不可迭代，并可能引发异常。 – Kludge

@ Abdul23，你的总体方向毕竟是真的：我在初始化ng-init时使用的变量在更新select.options后没有任何效果，所以迭代select.options最终解决了这个问题。我建议你发布这个答案。谢谢。 – Kludge

您需要使用ng-init="data = refactor.options(select)"所以从ajax数据获取数据后，将充满了options那么你可以使用ng-options作为代替ng-options="option in data.options"。

标记

<select ng-repeat="select in selects" 
    ng-init="data = refactor.options(select)" 
    ng-options="option in data.options"> 
</select>

来源

2015-06-20 17:23:25

在选项（？）中没有“data”属性 – Kludge

@Kludge这是我的糟糕..在answer.try中放置了'options'更新的答案.. –

看起来您似乎只是更改了包含变量的选项的名称从'选项'到'数据'...我很欣赏你试图帮助的事实，但问题是DOM没有被更新，尽管数据是。 – Kludge

你应该试试这个

myApp.factory('refactor', function($scope, $http) { 

return { 
    options: function(select) { 
       var menuItems={ 
        options:[] 
        } 

       if(typeof(select.options) === 'object'){ 
        menuItems.options=select.options 
       }; 

       // otherwise assume select.options is 
       // a path to fetch options by ajax: 

       $http.get(select.options).success(function(data) { 
        select.options = data; 
        menuItems.options=data;// data == ['male', 'female'] 
       }); 

       return menuItems; // placeholder until promise is fulfilled 
      } 
     } 
});

那么您认为里面应该是这样的

<select ng-repeat="select in selects" 
    ng-init="menuItems= refactor.options(select)" 
    ng-options="option in menuItems.options"> 
</select>

来源

2015-06-21 09:55:14 Abdul23

在工厂内由$ http所做的数据更改未反映到DOM中

回答

相关问题