切换输入值angularjs
[英]Toggling input value angularjs
问题描述
我正在用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>
1 个解决方案
解决方案1
0 2016-11-06 09:51:32
我找到了解决方案。 更改了缩略图的模型，
<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复选框无法切换
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.