Question

这里我添加了我的代码。我有两个移动品牌和带有子模型的模型

$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.Lumia（复选框）

2.Asha（复选框）

这里例如当我点击Lumia时，它应该显示一个带有输入文本框的复选框列表（输入移动模型价格的文本框） 1.Lumia 735 TS（带有用户输入文本框的复选框） 2.Lumia 510（带有用户输入文本框的复选框） 3.Lumia 830（带有用户输入文本框的复选框） 4.Lumia New（带有用户输入文本框的复选框）

同样在诺基亚选择Asha或者如果我选择三星Galaxy和Asha。当我提交控制器时，我应该被选中 1.brandname 2.modelname 3.Submodel 4.user在该文本框中输入了值我已经获得了brandname，modelname

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>

Answer 1

如果是，你可以尝试这样做。

＆＃13;

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;
  };
});

＆＃13;

<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>

＆＃13;

如何使用angularjs使用输入文本框复选框？

1 个答案: