从angularjs中的下拉列表中删除未定义的值

Remove undefiend value from drop down list in angularjs

本文关键字：未定义 删除 下拉列表 angularjs      更新时间：2023-09-26

区块报价

在选择material列时，第一列显示未定义，所以我需要从下拉列表中删除未定义，需要对html/json数据进行什么样的更改才能正常工作。

区块报价

var app = angular.module('Calc', []);
app.controller('Calc_Ctrl', function($scope) {
$scope.type = {
	"ceramicAndVetrified": {	
	"flooringWork": {
			"typeOfWork":"Flooring Work",
			"ceramicTile": {
				"activity": "Ceramic Tile",
				"unitOfWork": "sqm",
				"coeffecient": {
					"ceramicTile": "",
					
				},
				"material": "Ceramic floor tile",
				"tileSizes": [{
					"tileDimension": "300X300",
					
				}, {
					"tileDimension": "600X600",
					
				}]
			},
			"vitrifiedTile": {
				"activity": "Vitrified Tile",
				"unitOfWork": "sqm",
				"coeffecient": {
					
				},
				"material": "Vitrified floor tile",
				"tileSizes": [{
					"tileDimension": "600X600",
					
				}, {
					"tileDimension": "800X800",
					
				}, {
					"tileDimension": "1200X600",
					
				}]
			}
		},
		"wallTilingWork": {
			"typeOfWork":"Wall Tiling Work",
			"ceramicTile": {
				"activity": "Ceramic Tile",
				"unitOfWork": "sqm",
				"coeffecient": {
					"ceramicTile": "",
					
				},
				"material": "Ceramic wall tile",
				"tileSizes": [{
					"tileDimension": "300X300",
					
				}, {
					"tileDimension": "450X450",
					
				}, {
					"tileDimension": "300X450",
					
				}]
			},
			"vitrifiedTile": {
				"activity": "Vitrified Tile",
				"unitOfWork": "sqm",
				"coeffecient": {
					
				},
				"material": "Vitrified wall tile",
				"tileSizes": [{
					"tileDimension": "450X450",
					
				}, {
					"tileDimension": "300X450",
					
				}]
			}
		}
	},
	"images": {
		"calculatorHeaderImage": "http://www.msupply.com/media/catalog/product/0/0/00201000404.jpg",
		"imageURLs": ["http://www.msupply.com/media/catalog/product/0/0/00201000404.jpg", "http://www.msupply.com/media/catalog/product/0/0/00201000404.jpg"]
	}
}
});
<!DOCTYPE html>
<html>
     <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
     <body>
          <div ng-app="Calc" ng-controller="Calc_Ctrl">
                <script src="newscript.js"></script>
<div class = "col-lg-8 col-md-7 col-sm-7 col-xs-12 center-output " ng-app="Calc" ng-controller="Calc_Ctrl" >
     
                    <div class="col-md-3 col-sm-5 col-xs-5">
                         <div class="form-group">
                              <h6>type </h6>
                              <select class="form-control" id="category"  ng-model="selectedcategory" ng-options="y.typeOfWork for (x, y) in type.ceramicAndVetrified" ng-change="GetSelectedCategary()">
                              </select>
                              <span class="arrow"></span>
                         </div> 
                    </div> 
                  
                    <div class="col-md-3 col-sm-5 col-xs-5">
                         <div class="form-group">
                              <h6> Material </h6>
                              <select class="form-control" id="sel2" ng-disabled="!selectedcategory" ng-model="selectedtype" ng-options="y.activity for (x, y) in selectedcategory" ng-change="GetSelectedType()">
                              </select>
                             
                         </div> 
                    </div> 
                    <div class="col-md-3 col-sm-5 col-xs-5">
                         <div class="form-group">
                              <h6>Size: </h6>
                              <select class="form-control" id="sel3"  ng-disabled="!selectedtype" ng-model="selectedsize" ng-options="y.tileDimension for (x, y) in selectedtype.tileSizes">
                              
                              </select>
                              <span class="arrow"></span>
                         </div> 
                    </div> 
               </div>
          </div>
</html> 
</body>

发生这种情况的原因是因为typeOfWork.activity是undefined

"flooringWork": {
            "typeOfWork":"Flooring Work",

您应该考虑更改数据结构，或者创建一个检查[Object].activity的筛选器。

如果你可以更改数据，你应该考虑这样的事情；

    {
  "flooringWork":
  {
    "typeOfWork": "Flooring Work",
    "activities": [
      {
        "ceramicTile": {
          "activity": "Ceramic Tile",
          "unitOfWork": "sqm",
          "coeffecient": {
            "ceramicTile": "",
          },
          "material": "Ceramic floor tile",
          "tileSizes": [
            {
              "tileDimension": "300X300",
            }, {
              "tileDimension": "600X600",
            }
          ]
        },
        "vitrifiedTile": {
          "activity": "Vitrified Tile",
          "unitOfWork": "sqm",
          "coeffecient": {},
          "material": "Vitrified floor tile",
          "tileSizes": [
            {
              "tileDimension": "600X600",
            }, {
              "tileDimension": "800X800",
            }, {
              "tileDimension": "1200X600",
            }
          ]
        }
      }
    ]
  }
}

然后，您可以将您的选择更新为此；

<select class="form-control" id="sel2" ng-disabled="!selectedcategory" ng-model="selectedtype" ng-options="y.activity for (x, y) in selectedcategory.activities" ng-change="GetSelectedType()">
                              </select>
相关文章：