javascript - Toggling input value angularjs -
i'm creating grocery list app in angularjs. , here problem. codepen
while pick item list of categories highlight category icons, not happen in reverse. tried many different solutions , can't seem work.
im sorry, couldn't work snippet here. posted because couldn't post other way. working 1 @ 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 default selected index is, use -1 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 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 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>
i found solution. changed model on thumbnails,
<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> and wrote function update category model.
$scope.thumbclicked = function(name){ $scope.category = name; };
Comments
Post a Comment