Question

我在angularjs中创建了购物清单应用程序。这是我的问题。 CodePen

当我从类别列表中选择一个项目时，它突出显示我的类别图标，但它不会反过来发生。尝试了许多不同的解决方案，似乎无法使其发挥作用。

对不起，我无法在这里找到工作片段。我刚发布它是因为我无法以其他方式发布。工作在CodePen

＆＃13;

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;
        };

    });

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 1

我找到了解决方案。在缩略图上更改模型，

<md-input-container class="md-block" flex-gt-sm layout="row" layout-align="center center" flex-offset="25" >
        <label>Category</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="thumbClicked(thumb.name);itemClicked($index)" ng-repeat="thumb in categoriesObj" ng-model="thumb">
            <img ng-class="{ 'selected': $index == selectedIndex }" class="category" ng-src="{{thumb.img}}">
        </md-list-item>
    </md-list>

并编写了另一个更新类别模型的函数。

        $scope.thumbClicked = function(name){
        $scope.category = name;
    };

切换输入值angularjs

1 个答案: