0
Ich erstelle eine Einkaufslisten-App in angularjs. Und hier ist mein Problem. CodePenEingabewert umschalten angularjs
Während ich ein Element aus der Liste der Kategorien auswählen, markieren Sie meine Kategoriesymbole, es passiert nicht umgekehrt. Versuchte viele verschiedene Lösungen und scheint es nicht funktionieren zu lassen.
Es tut mir leid, aber ich konnte hier nicht arbeiten Schnipsel zu bekommen. Ich habe es gerade gepostet, weil ich nicht anders schreiben konnte. Die Arbeits ist bei 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>