如何从数据库中检查离子复选框

时间:2016-03-18 08:23:19

标签: ionic-framework

我已经填充了这个离子标签,所有项目都未经检查:

            <ion-checkbox ng-repeat="categoria in listaCategorias"
                           ng-model="categoria.checked"
                           ng-checked="categoria.checked"
                           ng-change="recuperarServicos(categoria)">
                           {{ categoria.nmCategoria }}
            </ion-checkbox>

这里我的控制器代码有一个'categoria id'列表:

//here I have the ids recovered from database that I split into an array of ids
var idsCategoria = $scope.meuanuncio.idsCategoria.trim().split(',');

if($scope.listaCategorias.length > 0)
{
    //for each item in my listaCategorias (used in ng-repeat)
    for (var i = 0; i < $scope.listaCategorias.length; i++) {

        var item = $scope.listaCategorias[i];

        //I compare id from each item with my list recovered from database
        if(idsCategoria.indexOf($scope.listaCategorias[i].idCategoria) != -1)
        {
            //If the item id exist in database list, I check the item
            item.checked = true;

            // Below there are other ways that I tried to use
            // $scope.listaCategorias[i].Selected = true;
            // $scope.listaCategorias[i].checked = true;
            $scope.listaCategorias[0].checked = true;
        }
    }
};

但我无法检查我的离子复选框项目。

我做错了什么?

感谢。

3 个答案:

答案 0 :(得分:1)

ng-model="categoria.checked"

看起来不错,但不认为你需要进行ng检查。

 var item = $scope.listaCategorias[i];
item.checked = true;

不,这个项目在循环中丢失了。我看到你正在尝试:

$scope.listaCategorias[i].checked = true;

您是否收到错误或其他内容?因为这看起来像是这样做的。

也许尝试在离子复选框周围的div上循环?又名

<div ng-repeat="categoria in listaCategorias">
   <ion-checkbox ng-model="categoria.checked"
                 ng-change="recuperarServicos(categoria)">
                 {{ categoria.nmCategoria }}
   </ion-checkbox> 
</div>

答案 1 :(得分:1)

试试这个:

<div ng-repeat="categoria in listaCategorias track by $index">
      <ion-item class="item item-checkbox">
           <label class="checkbox">
              <input type="checkbox" ng-model="categoria.checked" ng-change="recuperarServicos(categoria)">
           </label>
         {{categoria.nmCategoria}}
      </ion-item>
</div>

控制器:

$scope.recuperarServicos = function(categoria){
        if(categoria.selected && ($scope.selectedItems.indexOf(categoria.name) < 0)){
          $scope.selectedItems.push(categoria.name);
        }else{
            $scope.selectedItems.splice($scope.selectedItems.indexOf(categoria.name), 1);
        }
    };

希望这对你有所帮助..在某种程度上......!

答案 2 :(得分:0)

我的问题是我将我的项目数组归因于$ scope.listaCategorias。

我这样做:

$ scope.listaCategorias = listaCategorias;

但我需要这样做:

$ scope.listaCategorias.push.apply($ scope.listaCategorias,listaCategorias);

我正在使用checked属性构建一个数组,但是当我关联我的构建列表时,我正在关联第一个没有设置checked属性的数组。

让我现在展示我的代码。

我的观点:

        <div ng-repeat="item in listaCategorias track by $index">
              <ion-item class="item item-checkbox">
                   <label class="checkbox">
                      <input type="checkbox" ng-model="item.checked" ng-checked="item.checked" ng-change="recuperarServicos(item)">
                   </label>
                  {{ item.nmCategoria }}
              </ion-item>
        </div> 

我的控制器:

//here I get all my 'categorias' from datatable
listaCategorias = appFactory.recuperarCategorias();

//If list is not null go ahead   
if(listaCategorias != null) {

    //split into an array all my 'categoria' ids
    var idsCategoria = $scope.meuanuncio.idsCategoria.split(',');

    //if list has items go ahead
    if(listaCategorias.length > 0) {

        for (var i = 0; i < listaCategorias.length; i++) {

            //if 'categoria' id exists in datatable list set true, else false
            if(idsCategoria.indexOf(listaCategorias[i].idCategoria) != -1) {
                listaCategorias[i].checked = true;
            }
            else {
                listaCategorias[i].checked = false;
            }
        }
    };

    //Here is the point !!! I need to load my $scope variable this way to build all my items correctly
    $scope.listaCategorias.push.apply($scope.listaCategorias, listaCategorias);

}