vendredi 30 octobre 2015

Based On First Checkbox list value 2nd checkbox should come dynamically Using angularjs?

i am new to this technology please any one help me out.i have two different checkbox list 1st one is Select Stores 2nd one is Select your device Company name .baesd on first checkbox checked value 2nd(Select your device Company name) checkbox list should come achievements: achievement :Based on first check box list(Select Stores) values 2nd checkbox(Select your device Company name) list should come

Example1: if i select Sai Stores in Select Stores list .Select your device Company name list should show only Sai Stores

Example2 : if i select Sai Stores,Sri Ram Stores in Select Stores list .Select your device Company name list should show Sai Stores and Sri Ram Stores

Example3 :

if nothing is select in that Select Stores list . Select your device Company name list should be hide or not visible

Example 4:now i have already selected Sai Stores in Select Stores list.Select your device Company name list should show only Sai Stores .here instead of that its showing both in Select your device Company name list

if matched then only second list of checkbox should show other wise it should be hidden http://ift.tt/1MXlq6m

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="http://ift.tt/1bdM3QL"></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>



Aucun commentaire:

Enregistrer un commentaire