基于第一个复选框列表值第二个复选框应该动态地使用angularjs?

时间:2015-10-30 08:06:53

标签: javascript jquery angularjs checkbox

我是这项技术的新手请任何人帮助我。我有两个不同的复选框列表第一个是选择商店第二个是选择您的设备公司名称.baesd在第一个复选框选中的值第二个(选择您的设备公司名称)复选框列表应该成就:成就:基于第一个复选框列表(选择商店)值第二个复选框(选择您的设备公司名称)列表应该来

示例1:如果我在选择商店列表中选择Sai商店。选择您的设备公司名称列表应仅显示Sai商店

示例2:如果我选择Sai Stores,Sri Ram Stores在Select Stores列表中。选择您的设备公司名称列表应显示Sai Stores和Sri Ram Stores

示例3:

如果在“选择商店”列表中没有选择任何内容。选择您的设备公司名称列表应隐藏或不可见

示例4:现在我已经在选择商店列表中选择了Sai商店。选择您的设备公司名称列表应仅显示Sai商店。而不是它在选择您的设备公司名称列表中显示

如果匹配则只有第二个复选框列表应该显示其他方面它应该被隐藏 https://jsfiddle.net/bq5c1txd/11/

var app = angular.module("myApp", []);
    app.controller("Test1Controller", function($scope) {
    var serverData = ["Sai Stores", "Sri Ram Shop", "Ragava Stores","Baba DHl Shop"];
    $scope.items = [];
	var selectedStore = 'Sai Stores';
	$scope.itemChecked = false;
                for (var i = 0; i < serverData.length; i++) {
                    var modal = {
                        name: serverData[i],
                        selected: false

                    };
                  if (selectedStore.indexOf(serverData[i]) >= 0 ) {
                        modal.selected = true;

                    }

                    $scope.items.push(modal);
                   
                }

        $scope.itemsChecked = function() {
            $scope.itemChecked = false;
            for (var i = 0; i < $scope.items.length; i++) {
                if ($scope.items[i].selected) {
                    $scope.itemChecked = true;
                }
            }
        }
//-----------------------------------------------------------------------------------------------------
$scope.stores = [{

        id: "1",
        storeid: "86754634",
        storename: "Sai Stores",
		servicedevice:"Htc"
        
    }, {
         id: "2",
        storeid: "3746579",
        storename: "Sri Ram Stores",
		servicedevice:"Samsung"
    }

    ]
//-----------------------------------------------------------------------------------------------------
        $scope.check = function() {
            var checkedItems = [];
            for (var i = 0; i < $scope.items.length; i++) {
                if ($scope.items[i].selected) {
                    checkedItems.push($scope.items[i].name);
                }
            }
            console.log(checkedItems);
        }
		$scope.check1 = function() {
            var checkedItems1 = [];
            for (var i = 0; i < $scope.stores.length; i++) {
                if ($scope.stores[i].selected) {
                    checkedItems1.push($scope.stores[i].servicedevice);
                }
            }
            console.log(checkedItems1);
        }
    });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>
<div ng-app="myApp">
    <form name="projectForm">
        <div ng-controller="Test1Controller">
             <label>Select Stores</label>
            <div ng-repeat="item in items">
                <input type="checkbox" ng-model="item.selected" ng-change="itemsChecked()" required="" />{{item.name}}</div><br><br><br>
            <label>Select your device Company name</label>
			 <div ng-repeat="store in stores">
                <input type="checkbox" ng-model="store.selected"  required="" />{{store.storename}}</div>
				<div class="form-error" ng-messages="projectForm.booktime.$error">
                <div class="form-error" ng-message="required" ng-show="!itemChecked">* Mandatory</div>
            </div>
            <input type="button" name="submit" value="submit" ng-disabled="!itemChecked" ng-click="check();check1" />
        </div>
    </form>
  </div>

0 个答案:

没有答案