如何使用angularjs制作带有输入文本框的复选框
How to make checkbox with input text box using angularjs?
demo
在这里我添加了我的代码.我有两个带有子模型的移动品牌和型号
$scope.phones = [{
id: "986745",
brandname: "Nokia",
modelname: "Lumia",
"Submodel": [{
"name": "Lumia 735 TS"
}, {
"name": "Lumia 510"
}, {
"name": "Lumia 830"
}, {
"name": "Lumia New"
}]
}, {
id: "896785",
brandname: "Nokia",
modelname: "Asha",
"Submodel": [{
"name": "Asha 230"
}, {
"name": "Asha Asn01"
}, {
"name": "Nokia Asha Dual sim"
}, {
"name": "Asha 540"
}]
}, {
id: "144745",
brandname: "Samsung",
modelname: "Galaxy ",
"Submodel": [{
"name": "Trend 840"
}, {
"name": "A5"
}, {
"name": "Note 4 Duos"
}, {
"name": "Galaxy Note Duos"
},
{
"name": "Galaxy A5"
}]
}, {
id: "986980",
brandname: "Samsung",
modelname: "Asha",
"Submodel": [{
"name": "Asha 230"
}, {
"name": "Asha Asn01"
}, {
"name": "Asha Dual sim"
}, {
"name": "Asha 540"
}]
},
];
当我单击诺基亚复选框时。Lumia 和 Asha 复选框即将到来,同样的事情也适用于三星
我的期望:当我单击诺基亚时,它应该显示
1.卢米亚(复选框)
2.阿莎(复选框)
例如,当我单击Lumia时,它应该显示另一个带有输入文本框的复选框列表(用于输入移动型号价格的文本框)1.Lumia 735 TS(带有用户输入文本框的复选框)2.Lumia 510(带有用户输入文本框的复选框)3.Lumia 830(带有用户输入文本框的复选框)4.Lumia New(带有用户输入文本框的复选框)
在诺基亚中选择Asha或如果我选择三星Galaxy和Asha时也是如此。当我提交控制器时,我应该被选中1.品牌名称2.型号名称3.子模型4.用户在该文本框中输入的值我已经得到了品牌名称,型号名称
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl', function($scope) {
$scope.selectedBrands = [];
$scope.selectBrand = function(selectedPhone) {
// If we deselect the brand
if ($scope.selectedBrands.indexOf(selectedPhone.brandname) === -1) {
// Deselect all phones of that brand
angular.forEach($scope.phones, function(phone) {
if (phone.brandname === selectedPhone.brandname) {
phone.selected = false;
}
});
}
}
$scope.checkSelectedPhones = function() {
var modelNames = [];
var aletrMsg= '';
angular.forEach($scope.phones, function(phone) {
if (phone.selected) {
modelNames.push(phone);
aletrMsg += 'Brand : '+ phone.brandname + 'Phone Name: '+ phone.modelname + ' : Price: '+ phone.price +', ';
}
});
alert(modelNames.length ? aletrMsg : 'No phones selected!');
}
$scope.phones = [{
id: "986745",
brandname: "Nokia",
modelname: "Lumia",
"Submodel": [{
"name": "Lumia 735 TS"
}, {
"name": "Lumia 510"
}, {
"name": "Lumia 830"
}, {
"name": "Lumia New"
}]
}, {
id: "896785",
brandname: "Nokia",
modelname: "Asha",
"Submodel": [{
"name": "Asha 230"
}, {
"name": "Asha Asn01"
}, {
"name": "Nokia Asha Dual sim"
}, {
"name": "Asha 540"
}]
}, {
id: "144745",
brandname: "Samsung",
modelname: "Galaxy ",
"Submodel": [{
"name": "Trend 840"
}, {
"name": "A5"
}, {
"name": "Note 4 Duos"
}, {
"name": "Galaxy Note Duos"
},
{
"name": "Galaxy A5"
}]
}, {
id: "986980",
brandname: "Samsung",
modelname: "Asha",
"Submodel": [{
"name": "Asha 230"
}, {
"name": "Asha Asn01"
}, {
"name": "Asha Dual sim"
}, {
"name": "Asha 540"
}]
},
];
});
myApp.filter('unique', function() {
return function(collection, keyname) {
var output = [],
keys = [];
angular.forEach(collection, function(item) {
var key = item[keyname];
if(keys.indexOf(key) === -1) {
keys.push(key);
output.push(item);
}
});
return output;
};
});
<div ng-controller="MyCtrl">
<button ng-click="checkSelectedPhones()">
Check selected phones
</button>
<div ng-repeat="phone in phones | unique:'brandname'">
<label>
<input type="checkbox" ng-true-value="'{{phone.brandname}}'" ng-false-value="''" ng-model="selectedBrands[$index]" ng-change="selectBrand(phone)">
{{phone.brandname}}
</label>
</div>
<br>
<div ng-repeat="brand in selectedBrands track by $index" ng-if="brand">
{{brand}}
<div ng-repeat="phone in phones" ng-if="phone.brandname === brand">
<label>
<input type="checkbox" ng-model="phone.selected" >
{{phone.modelname}}
</label>
</div>
</div>
</div>
如果是,
您可以尝试做这样的事情。
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl', function($scope) {
$scope.selectedBrands = [];
$scope.selectBrand = function(selectedPhone) {
// If we deselect the brand
if ($scope.selectedBrands.indexOf(selectedPhone.brandname) === -1) {
// Deselect all phones of that brand
angular.forEach($scope.phones, function(phone) {
if (phone.brandname === selectedPhone.brandname) {
phone.selected = false;
}
});
}
}
$scope.checkSelectedPhones = function() {
var modelNames = [];
var aletrMsg= '';
angular.forEach($scope.phones, function(phone) {
if (phone.selected) {
modelNames.push(phone);
aletrMsg += 'Brand : '+ phone.brandname + 'Phone Name: '+ phone.modelname + ' : Price: '+ phone.price +', ';
}
});
alert(modelNames.length ? aletrMsg : 'No phones selected!');
}
$scope.phones = [{
id: "986745",
brandname: "Nokia",
modelname: "Lumia",
"Submodel": [{
"name": "Lumia 735 TS",
selected:false
}, {
"name": "Lumia 510",
selected:false
}, {
"name": "Lumia 830",
selected:false
}, {
"name": "Lumia New",
selected:false
}]
}, {
id: "896785",
brandname: "Nokia",
modelname: "Asha",
"Submodel": [{
"name": "Asha 230",
selected:false
}, {
"name": "Asha Asn01",
selected:false
}, {
"name": "Nokia Asha Dual sim",
selected:false
}, {
"name": "Asha 540",
selected:false
}]
}, {
id: "144745",
brandname: "Samsung",
modelname: "Galaxy ",
"Submodel": [{
"name": "Trend 840",
selected:false
}, {
"name": "A5",
selected:false
}, {
"name": "Note 4 Duos",
selected:false
}, {
"name": "Galaxy Note Duos",
selected:false
},
{
"name": "Galaxy A5",
selected:false
}]
}, {
id: "986980",
brandname: "Samsung",
modelname: "Asha",
"Submodel": [{
"name": "Asha 230",
selected:false
}, {
"name": "Asha Asn01",
selected:false
}, {
"name": "Asha Dual sim",
selected:false
}, {
"name": "Asha 540",
selected:false
}]
},
];
});
myApp.filter('unique', function() {
return function(collection, keyname) {
var output = [],
keys = [];
angular.forEach(collection, function(item) {
var key = item[keyname];
if(keys.indexOf(key) === -1) {
keys.push(key);
output.push(item);
}
});
return output;
};
});
<div ng-controller="MyCtrl">
<button ng-click="checkSelectedPhones()">
Check selected phones
</button>
<div ng-repeat="phone in phones | unique:'brandname'">
<label>
<input type="checkbox" ng-true-value="'{{phone.brandname}}'" ng-false-value="''" ng-model="selectedBrands[$index]" ng-change="selectBrand(phone)">
{{phone.brandname}}
</label>
</div>
<br>
<div ng-repeat="brand in selectedBrands track by $index" ng-if="brand">
{{brand}}
<div ng-repeat="phone in phones" ng-if="phone.brandname === brand">
<label for="demo-{{phone.modelname}}">{{phone.modelname}}</label>
<input id="demo-{{phone.modelname}}" type="checkbox" ng-model="phone.selected" >
<div ng-repeat="subm in phone.Submodel" ng-if="phone.selected">
<label for="demo-{{subm.name}}">{{subm.name}}</label>
<input id="demo-{{subm.name}}" type="checkbox" ng-model="subm.selected">
</div>
</div>
</div>
</div>
相关文章:
- 复选框与文本内联-JS问题
- 根据文本值禁用复选框
- 使用javascript提交表单并从字段/单选框/复选框/文本区域获取数据
- Javascript选中/取消选中所有复选框并将值写入文本区域
- 获取文本框中所有选定复选框的值
- 动态选中文本区域中现有项目的复选框组
- 选中复选框时更改文本框值
- 单击每个表格行中的复选框时启用文本框
- jQuery表 - 如何根据选中的复选框在单元格中写入文本
- 在 AngularJs 中触发文本框的复选框
- 基于复选框 Jquery 更新文本框
- 根据复选框选择 jQuery 更新文本框
- 我无法禁用带有复选框的文本框
- 从选中的复选框中获取所有值,并将其放入文本区域
- 使用复选框列表中的jquery附加文本
- 在其他文本输入字段中输入文本时启用复选框
- 选中复选框时清除填充有datatime选取器数据的文本框
- 将文本值与复选框值之和相乘,并将其显示在段落中
- 使用复选框和js输入文本
- j查询选中了同级文本复选框