Question

我是前端Web开发的新手。我正在使用AngularJS动态创建复选框。

<div ng-repeat="x in Brands" style="margin-left: 20px">
   <input type="checkbox" ng-model="newObject[x.product_brand]">
   <label> {{ x.product_brand }} </label>
</div>

按照以下链接中给出的方法，我想使用隐藏/显示div 使用动态创建的复选框。

Dynamic ng-model
ng-show

这是代码 -

<div class="item panel panel-default" ng-repeat="x in Brands" ng-show="newObject[x.product_brand]">
    <div class="panel-heading">
        {{x.product_brand}}
    </div>
    <div class="panel-body">
    </div>
</div>

控制器 -

app.controller('BrandController', function($scope, $http) {
    getProductsInfo();

    function getProductsInfo() {
        $http.get("sql.php").success(function(data) {
            $scope.Brands = data;
        });
    };
});

但它不起作用。选中/取消选中复选框不会执行任何操作。

Answer 1

我认为你需要这样的东西runnable fiddle。使用AngularJS可以轻松管理这种句柄。欢迎=）!!!请注意：$timeout是为了模拟您的异步$http请求 - 它不是解决方案的一部分。

视图

<div ng-controller="MyCtrl">
  <div ng-repeat="x in Brands" style="margin-left: 20px">
     <input type="checkbox" ng-model="x.active">
     <label> {{ x.product_brand }} </label>
  </div>
  <div class="item panel panel-default" ng-repeat="x in Brands" ng-show="x.active">
    <div class="panel-heading">
        {{x.product_brand}}
    </div>
    <div class="panel-body">
    </div>
</div>
</div>

AngularJS演示应用程序

var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl', function ($scope, $timeout) {

   $scope.Brands = [];

   init();

   function init () {
        $timeout(function () {
            $scope.Brands = [{
                product_brand: 'brand 1'
            },{
                product_brand: 'brand 2'
            },{
                product_brand: 'brand 3'
            },{
                product_brand: 'brand 4'
            }];
        });
   }
});

Answer 2

可能它不起作用，因为您从未在 $ scope 上定义 newObject 。实际上，您正试图访问undefined[x.product_brand]。

控制器中的$scope.newObject = {};之类的东西应该可以解决问题。

AngularJS - 用于隐藏/显示Div

2 个答案:

视图

AngularJS演示应用程序