AngularJS：無法讀取未定義的屬性「選項」

使用ng-repeat和ng-options創建下拉列表。一切都很好，除非當我點擊「添加」沒有選擇任何選項，控制檯給我錯誤「無法讀取屬性」選項'的未定義「AngularJS：無法讀取未定義的屬性「選項」

我希望默認選項是'select ...'但是當我使用$ scope.Girl ='選擇...'，它說'女孩'未定義。請幫忙。

var app = angular.module('plunker', []); 
 

 
app.controller('MainCtrl', function($scope) { 
 
    $scope.item = { 
 
    
 
    "styles": [{ 
 
    "style": "Girl", 
 
    "options": [{ 
 
     "option": "Select..." 
 
    }, { 
 
     "option": "Anna" 
 
    }, { 
 
     "option": "Betty" 
 
    }, { 
 
     "option": "Clara" 
 
    }] 
 
    }, { 
 
    "style": "Boy", 
 
    "options": [{ 
 
     "option": "Select..." 
 
    }, { 
 
     "option": "Anthony" 
 
    }, { 
 
     "option": "Billy" 
 
    }, { 
 
     "option": "Charles" 
 
    }] 
 
    }] 
 
}; 
 
    
 
$scope.addItems = function(items) { 
 
    var text = ''; 
 
    angular.forEach(items.styles, function (style) { 
 
    text += style.style + ': ' + style.selectedItem.option + '. '; 
 
    }); 
 
    
 
    $scope.selectedText = text; 
 
}; 
 
});

<!DOCTYPE html> 
 
<html ng-app="plunker"> 
 

 
    <head> 
 
    <meta charset="utf-8" /> 
 
    <title>AngularJS Plunker</title> 
 
    <script>document.write('<base href="' + document.location + '" />');</script> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    <script data-require="[email protected]*" data-semver="1.3.1" src="//code.angularjs.org/1.3.1/angular.js"></script> 
 
    <script src="app.js"></script> 
 
    </head> 
 

 
    <body ng-controller="MainCtrl"> 
 
    <div> 
 
    
 
    <div ng-repeat="style in item.styles"> 
 
    <label class="input-label">{{style.style}}</label> 
 
    <select ng-model="style.selectedItem" ng-options="option.option for option in style.options"> 
 
    </select> 
 
    </div> 
 
    <button class="button button-icon ion-plus" ng-click="addItems(item)"> 
 
    add 
 
    </button> 
 
    
 
    <div> 
 
    
 
    </div> 
 
    {{selectedText}} 
 
    </div> 
 
    </body> 
 

 
</html>

Plunker：http://plnkr.co/edit/N6oO8c6tL1bw9FCYVmYz?p=preview

任何指針被理解。我的目標： 1.當沒有選擇一個選項時點擊「添加」按鈕，顯示「請選擇一個選項」的消息

兩個選項下拉默認值是「Select ... 「

謝謝！

來源

2016-06-12 Developer J

請提供適當的書面解釋，說明這些代碼應該做什麼。見[問]。請注意，'style.selectedItem'不同於$ scope.selectedItem' – charlietfl

以下將訣竅Select...只是一個佔位符。

<select ng-model="style.selectedItem" ng-options="option.option for option in style.options"> 
    <option value="" disabled selected hidden>Select...</option> 
</select>

要顯示一條信息，提醒用戶沒有選擇，你可以做到這一點邏輯的選項：

$scope.addItems = function(items) { 
    var text = ''; 
    var hasSelected = false; 
    angular.forEach(items.styles, function(style) { 
     if (style.selectedItem) { 
     hasSelected = true; 
     text += style.style + ': ' + style.selectedItem.option + '. '; 
     } 
    }); 

    if (!hasSelected){ 
     text = "Select an option."; 
    } 

    $scope.selectedText = text; 
};

看一看的updated fiddle。

來源

2016-06-12 02:51:53 adolfosrs

謝謝adolfosrs。您提供的解決方案效果很好。除了在選擇兩個下拉菜單時顯示的「請選擇一個選項」消息。如果我只想在沒有選擇任何下拉菜單時顯示消息，如果至少選擇了一個選項，則含義不顯示消息。 –

你快！謝謝adolfosrs。我喜歡你的通用解決方案，因爲我可以有任何數量的下拉菜單。例如，只要將它們添加到$ scope.item中，我就可以添加「Man」和「Woman」樣式。然而，對於「男人」和「女人」，默認值不是選擇......他們有其獨特的默認值。通過您的解決方案，我如何添加多個具有多個默認值的佔位符？ –

AngularJS：無法讀取未定義的屬性「選項」

回答

相關問題