Multi drop down selection in Angular

Viewed 185

I have a error in my chrome console that I can not seem to solve.

I have a controller and front end code. The Idea is I have two drop downs, second is dependent on the first. they get the data from objects that have parent and child the second box shows the first boxes children.

Its worked for weeks, but I double check some functionality this morning and it seems to be broken and I am getting the error bellow.

can anyone see what is Wrong with the code ?

**ErrorTypeError: Cannot create property 'ProductType' on string 'Post Data Submitted Successfully!' at Object.fn.assign (eval at compile (angular.js:15500), :4:431) at Object.$$writeModelToScope (angular.js:29101) at angular.js:29095 at g (angular.js:29014) at e (angular.js:28997) at Object.$$runValidators (angular.js:28941) at Object.$$parseAndValidate (angular.js:29082) at Object.$commitViewValue (angular.js:29048) at Object.$$debounceViewValueCommit (angular.js:29186) at Object.$setViewValue (angular.js:29166)

controller.js

FirstModule.controller('dropDown', function ($scope) {
    console.log("First cnt dropDown LOADED");

    $scope.productsandformats = [
        {
            "name": "tom",
            "format": [
                {"Fname": "ddf", "id": "Roadside"},
                {"Fname": "ffr", "id": "roadsoop"},
                {"Fname": "Wfg(Digital)", "id": "fff"}
            ]
        },
        {
            "name": "harry",
            "format": [
                {"Fname": "fef", "id": "4ee"},
                {"Fname": "fff (Digital)", "id": "derfere"}
            ]
        },

        {
            "name": "Supermarkets",
            "format": [
                {"Fname": "Asda ", "id": "asda"},
                {"Fname": "Sainsbury’s ", "id": "sains"}
            ]
        }];

    $scope.productTypeChange = function () {
        $scope.formats = $scope.productsandformats.find(ps => ps.name === $scope.formData.ProductType.name
    )
        //NG-Change
        $scope.myFunc = function () {
            var jsonItem = ($scope.formData.formatType.id);
            sessionStorage.setItem('format', jsonItem);
        }
    } });

Front end angular

<div class="form-group">
    <div ng-controller="dropDown">

        <select ng-model="formData.ProductType.name" ng-change="productTypeChange()" ng-options="product.name as product.name for product in productsandformats">
            <option value="">- Please Choose -</option>
        </select>

        <select ng-model="formData.formatType" ng-options="format.Fname for format in formats.format" ng-if="formData.ProductType.name" ng-change="myFunc()">
            <option value="">- Please Choose -</option>
        </select>

        <div class="row">
            <div class="btn-group creative-format">
                <label class="btn btn-primary" ng-model="format" uib-btn-radio="'Roadside'">Roadside</label>
                <label class="btn btn-primary" ng-model="format" uib-btn-radio="'Digital'">Digital</label>
                <label class="btn btn-primary" ng-model="format" uib-btn-radio="'Billboard'">Billboard</label>
                <label class="btn btn-primary" ng-model="format" uib-btn-radio="'Premium'">Premium</label>
            </div>
        </div>

        <!--<div ng-controller="dropDown">-->
        <!--<button ng-click="myFunc()">send session</button>-->
        <!--</div>-->

        <!--<script>var jsonItem = JSON.stringify($scope.formData.ProductType.name);-->
        <!--sessionStorage.setItem('format', jsonItem);</script>-->

    </div>
</div>
0 Answers
Related