0
我在angularjs中創建購物清單應用程序。這是我的問題。 CodePen切換輸入值angularjs
雖然我從類別列表中選擇一個項目，它會突出顯示我的類別圖標，但它不會以相反的方式發生。嘗試了許多不同的解決方案，似乎無法得到它的工作。
對不起，但我無法在這裏工作片段。我剛剛發佈了它，因爲我無法發佈其他方式。工作一個是CodePen
angular.module('MyApp',['ngMaterial'])
.controller('ItemsCtrl',function($scope){
$scope.amounts = ('1kg 2kg 3kg 4kg 5kg '+'1szt 2szt 3szt 4szt 5szt 6szt 7szt '+'1l 2l 3l 4l 5l').split(' ').map(function(amount){
return {abbrev: amount};
});
$scope.items = [
];
$scope.categoriesObj = [
{
name:'Vegetables',
img:'img/noun_75334_cc.svg'
},
{
name:'Vegetables',
img:'img/noun_75333_cc.svg'
},
{
name:'Fruits',
img:'img/noun_75334_cc.svg'
},
{
name:'Chemistry',
img:'img/noun_75335_cc.svg'
},
{
name:'Drinks',
img:'img/noun_75336_cc.svg'
},
{
name:'Alcohol',
img:'img/noun_75337_cc.svg'
}
];
$scope.pushItem = function(name,amount,category){
$scope.items.push(
{
name:name,
amount:amount,
category:category
}
)
};
$scope.selectItem = function (item){
$scope.category = item;
};
$scope.selectedIndex = -1; // Whatever the default selected index is, use -1 for no selection
$scope.itemClicked = function ($index) {
$scope.selectedIndex = $index;
};
});html,body {
font-family: 'Roboto', sans-serif;
font-size: 16px;
height:100%;
margin:0;
padding: 0;
}
md-toolbar h3 {
margin:auto;
font-weight: 700;
}
md-list-item > button {
width:100%;
font-weight: 700;
text-align: left;
}
.btn1 {
background-color: lightgreen;
}
.avatar {
position: relative;
width: 128px;
height: 128px;
border-radius: 50%;
border: 1px solid #ddd;
display: inline-block;
overflow: hidden;
margin: 0px;
vertical-align: middle;
zoom: 1;
transform: translateZ(1);
-webkit-transform: scale(1);
-moz-transform: scale(1);
}
.category {
padding:20px 10px 0px 10px;
width:150px;
height: 150px;
display: inline-block;
float: left;
border-radius: 50%;
border: 1px solid #ddd;
}
.category:hover {
-webkit-transform: scale(1.4);
border: 1px solid lightblue;
}
.category:first-child {
margin-left: 30px;
}
ul {
list-style-type: none;
}
.selected {
border: 3px solid #000;
}<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
<body ng-app="MyApp" layout="column">
<md-toolbar>
<h1>Grocery List Application</h1>
</md-toolbar>
<div class="container" layout="row" flex ng-controller="ItemsCtrl">
<md-sidenav md-is-locked-open="true" class="md-whiteframe-4dp">
<md-list>
<md-list-item ng-repeat="categories in categoriesObj">
<md-button>
<md-icon md-svg-src="{{ categories.img }}" class="avatar"></md-icon>
<h2>{{ categories.name }}</h2>
</md-button>
</md-list-item>
</md-list>
</md-sidenav>
<md-content id="content" class="lightgreen" flex >
<md-input-container class="md-icon-float md-block" layout="row" layout-align="center center" flex-offset="25" >
<label >What to add?</label>
<input flex="30" flex-order="1" ng-model="name" type="text">
<md-button flex="60" flex-order="2" md-no-ink class="md-primary btn1" ng-click="pushItem(name,amount,category)">Add Item to List</md-button>
</md-input-container>
<md-input-container class="md-block" flex-gt-sm layout="row" layout-align="center center" flex-offset="25" >
<label>Amount</label>
<md-select flex="30" flex-order="1" ng-model="amount">
<md-option ng-repeat="amount in amounts" value="{{amount.abbrev}}">
{{amount.abbrev}}
</md-option>
</md-select>
</md-input-container>
<md-input-container class="md-block" flex-gt-sm layout="row" layout-align="center center" flex-offset="25" >
<label>Amount</label>
<md-select flex="30" flex-order="1" ng-model="category">
<md-option ng-click="itemClicked($index)" ng-repeat="category in categoriesObj" value="{{category.name}}">
{{category.name}}
</md-option>
</md-select>
</md-input-container>
<md-list flex layout="row">
<md-list-item ng-click="itemClicked($index)" ng-repeat="categories in categoriesObj" ng-model="category">
<img ng-class="{ 'selected': $index == selectedIndex }" class="category" ng-src="{{categories.img}}">
</md-list-item>
</md-list>
{{categories}}
{{thumb}}
</md-content>
</div>
<!-- Angular Material requires Angular.js Libraries -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
<!-- Angular Material Library -->
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>