Javascript AngularJS-隐藏/显示div的动态复选框
我不熟悉前端web开发。我正在使用AngularJS动态创建复选框Javascript AngularJS-隐藏/显示div的动态复选框,javascript,html,angularjs,checkbox,Javascript,Html,Angularjs,Checkbox,我不熟悉前端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 ng-repeat="x in Brands" style="margin-left: 20px">
<input type="checkbox" ng-model="newObject[x.product_brand]">
<label> {{ x.product_brand }} </label>
</div>
但它不起作用。选中/取消选中复选框不起任何作用 我想你需要这样的东西。使用AngularJS很容易管理这种句柄。欢迎=)!!!请注意:
$timeout
用于模拟异步$http
请求-它不是解决方案的一部分
看法
可能它不起作用,因为您从未在$scope上定义newObject。因此,实际上您正在尝试访问
未定义的[x.product\u brand]
类似于
$scope.newObject={}你的控制器中的代码>应该会起作用。@Abhishek这里有一把小提琴。对我有用。谢谢这是我的错误,我在另一个控制器中声明了新对象。
<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;
});
};
});
<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>
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'
}];
});
}
});