This is used for match the following option.
While I drag the div id 'div2' along with this first div id 'div1' also to be dragged. how to set draggable false for div id 'div1'
.controller('BEGINNER_UNIT_1_CONVERSATION_ACTIVITY_2', function($scope, $stateParams, $http)
{
$scope.OnDropComplete = function (index, source)
{
var otherObj = $scope.category_Question[index];
var otherIndex = $scope.category_Question.indexOf(source);
$scope.category_Question[index] = source;
$scope.category_Question[otherIndex] = otherObj;
}
})
--------------------------------------------------------
<div ng-repeat="source in category_Question" ng-controller="BEGINNER_UNIT_1_CONVERSATION_ACTIVITY_2" >
<div class="card" id="div1" draggable="false">
<div class="item item-divider">{{ $index+1 }}.Sentence </div>
<div class="item item-text-wrap" style="color:#CC0066;font-weight:bold;">{{ source.Sentance }}</div>
</div>
<div class="card" id="div2" ng-drop="true" ng-drop-success="OnDropComplete($index,$data)">
<div ng-drag="true" ng-drag-data="source" ng-class="source.Response">
<div class="item item-divider">Response</div>
<div class="item item-text-wrap"> {{ source.Response }} </div>
</div>
</div>
</div>
--------------------------------------------------------
You're using the wrong attribute. draggable="false".
It should be ng-cancel-drag
Your html would look like:
<div class="card" id="div1" ng-cancel-drag>
...
</div>
Related
Is anyone help me, when I start to code to show data in blade with angularJS, data not showing in the page, even the data exists in the console. This following code in my app.js
// app.js
$scope.view_tab = 'shop1';
$scope.changeTab = function(tab) {
$scope.view_tab = tab;
}
// List product
$scope.loadProduct = function () {
$http.get('/getproduct').then(function success(e) {
console.log(e.data);
$scope.products = e.data.product;
$scope.totalProduct = $scope.products.length;
$scope.currentPage = 1;
$scope.pageSize = 9;
$scope.sortKey = 'id_kain';
};
//index.blade.php
<div class="shop-top-bar">
<div class="shop-tab nav">
<a ng-class="{'active': view_tab == 'shop1'}" ng-click="changeTab('shop1')" data-toggle="tab">
<i class="fa fa-table"></i>
</a>
<a ng-class="{'active': view_tab == 'shop2'}" ng-click="changeTab('shop2')" data-toggle="tab">
<i class="fa fa-list-ul"></i>
</a>
</div>
</div>
<div class="shop-bottom-area mt-35">
<div class="tab-content jump">
<div class="tab-pane" ng-class="{active: view_tab == 'shop1'}">
<div class="row">
<div ng-repeat="data in filtered = ( products | filter:search ) | orderBy:sortData | itemsPerPage: 9" class="col-xl-4 col-md-6 col-lg-6 col-sm-6">
<div class="product-wrap mb-25 scroll-zoom">
<div class="product-img">
<a ng-click="showForm(data)">
<img class="default-img" ng-src="#{{ data.gambar_kain[0].gambar_kain }}" alt="">
<img class="hover-img" ng-src="#{{ data.gambar_kain[1].gambar_kain }}" alt="">
</a>
</div>
<div class="product-content text-center">
<h3>#{{data.nama_kain}}</h3>
<div class="product-price">
<span>#{{numberingFormat(data.data_kain[0].harga_kain)}}</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane" ng-class="{active: view_tab == 'shop2'}">
<div dir-paginate="datas in filtered = ( products | filter:search ) | orderBy:sortData | itemsPerPage:9" class="shop-list-wrap mb-30">
<div class="row">
<div class="col-xl-4 col-lg-5 col-md-5 col-sm-6">
<div class="product-wrap">
<div class="product-img">
<a ng-click="showForm(datas)">
<img class="default-img" ng-src="#{{ datas.gambar_kain[0].gambar_kain }}" alt="">
<img class="hover-img" ng-src="#{{ datas.gambar_kain[1].gambar_kain }}" alt="">
</a>
</div>
</div>
</div>
<div class="col-xl-8 col-lg-7 col-md-7 col-sm-6">
<div class="shop-list-content">
<h3>#{{data.nama_kain}}</h3>
<div class="product-list-price">
<span>#{{numberingFormat(datas.data_kain[0].harga_kain)}}</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="pro-pagination-style text-center mt-30">
<dir-pagination-controls
max-size="1"
direction-links="true"
boundary-links="true" >
</dir-pagination-controls>
</div>
</div>
Data still not shows in the page, there are not errors in this page, but I don't know how can I fix this.
As I know there is two way to show data in Angular JS when you define the scopes then you need the ng-bind or ng-model to show data in the front end.
1- AngularJS Data Binding
live Example https://www.w3schools.com/code/tryit.asp?filename=G2DQQ2GSJ3EO
<div ng-app="myApp" ng-controller="myCtrl">
<p ng-bind="firstname "></p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstname = "John will be change";
});
</script>
2-AngularJS ng-model Directive
Live Example https://www.w3schools.com/code/tryit.asp?filename=G2DQQEUEPSOC
<div ng-app="myApp" ng-controller="myCtrl">
Name: <input ng-model="name">
<h1>You entered: {{name}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = "John Doe";
});
</script>
NOTE: try with static data and then check that you have valid data to make it dynamic
I hope this helps you!
I am trying to add the value of both pages on selection.
It is adding on individual pages. But while I am moving to the next page the Total value comes Zero. I am trying to add pass total added value from one page to another page.
As I search , I found that there is a need to create a service controller to call a global scope value.
<!-- page one view page -->
<ion-content class="search-main padding">
<div class="list card">
<div class="item item-body no-padding stable">
<div class="row no-padding border-bottom" ng-controller="Ctrl3">
<div class="col padding border-right" ng-click="openDateCheckIn()">
<div class="margin-bottom-10" style="color:#0c60ee;"><i class="icon icon-money"></i> Total Value =></div>
</div>
<div class="col padding"><h2 style="text-align:center; margin-top: 3px;">Rs. <b>{{rootSum()}}</b></h2></div>
</div>ass="col padding"><h2 style="text-align:center; margin-top: 3px;">Rs. {{rootSum()}}</h2></div>
</div>
<div ng-controller="Ctrl1">
<div ng-repeat="gender in genders">
<div class="row row-no-padding no-margin padding-important" style="color: #000;">
<div class="col col-70"><i class="ion ion-ios-circle-filled"></i> <span> {{gender.id}}</span></div>
<div class="col col-20"><span>Rs {{gender.value}}</span></div>
<div class="col col-10"><div><label class="search-checkbox item item-checkbox" style="margin: -5px 0px 0px -2px;"><div class="checkbox checkbox-input-hidden disable-pointer-events checkbox-circle"><input id="{{gender}}" type="checkbox" value="{{gender.value}}" ng-checked="selection.indexOf(gender) > -1" ng-click="toggleSelection(gender)" /><i class="checkbox-icon"></i></div><div class="item-content disable-pointer-events" ng-transclude=""></div></label></div>
</div></div>
</div></div>
</ion-content>
<!-- Page two view page -->
<ion-content class="search-main padding">
<div class="list card">
<div class="item item-body no-padding stable">
<div class="row no-padding border-bottom" ng-controller="Ctrl3">
<div class="col padding border-right" ng-click="openDateCheckIn()">
<div class="margin-bottom-10" style="color:#0c60ee;"><i class="icon icon-money"></i> Total Value =></div>
</div>
<div class="col padding"><h2 style="text-align:center; margin-top: 3px;">Rs. <b>{{rootSum()}}</b></h2></div>
</div>
<div ng-controller="Ctrl2">
<div ng-repeat="gender in genders">
<div class="row row-no-padding no-margin padding-important" style="color: #000;">
<div class="col col-70"><i class="ion ion-ios-circle-filled"></i> <span> {{gender.id}}</span></div>
<div class="col col-20"><span>Rs {{gender.value}}</span></div>
<div class="col col-10"><div><label class="search-checkbox item item-checkbox" style="margin: -5px 0px 0px -2px;"><div class="checkbox checkbox-input-hidden disable-pointer-events checkbox-circle"><input id="{{gender}}" type="checkbox" value="{{gender.value}}" ng-checked="selection.indexOf(gender) > -1" ng-click="toggleSelection(gender)" /><i class="checkbox-icon"></i></div><div class="item-content disable-pointer-events" ng-transclude=""></div></label></div>
</div></div>
</div></div>
</div>
</div>
</ion-content>
Controller page --
//Ladies Makeup Party
.controller('Ctrl1', function($scope ,$rootScope) {
$scope.genders=[{
'id':'Krylon Party Makeup', 'value':2000 },
{'id':'Makeup Studio', 'value':2200 },
{'id':'Party Makeup(MAC)', 'value':2500 },
{'id':'Party Mackeup(Airbrush)', 'value':3500 }
];
$rootScope.selection=[];
$scope.toggleSelection = function toggleSelection(gender) {
var idx = $scope.selection.indexOf(gender);
if (idx > -1) {
$scope.selection.splice(idx, 1);
}
else {
$scope.selection.push(gender);
}
};
})
//Ladies Makeup Pre-bridal
.controller('Ctrl2', function($scope ,$rootScope) {
$scope.genders=[{
'id':'Silver', 'value':10000 },
{'id':'Gold', 'value':12000 },
{'id':'Platinum', 'value':16000 }
];
$rootScope.selection=[];
$scope.toggleSelection = function toggleSelection(gender) {
var idx = $scope.selection.indexOf(gender);
if (idx > -1) {
$scope.selection.splice(idx, 1);
}
else {
$scope.selection.push(gender);
}
};
})
// Add total value on select
.controller('Ctrl3', function($scope ,$rootScope) {
$rootScope.rootSum=function(){
var total=0;
for(var i = 0; i < $rootScope.selection.length; i++){
var product = $rootScope.selection[i];
total += (product.value);
}
return total
};
}) *
There are two problems I can see here.
You are initialising $rootScope.selection = [] at every controller, this deletes all previous changes. Initialise it at start of page load inside run block.Use this link to implement run run.
myApp.run(function() {
console.log("app run");
});
You are not transferring selected data to $rootScope.selection variable. You need to append your selected product in rootScope and make sure no item is repeated. Instead of array, I recommend you to use object with 'ids' as attrinute name, this will ensure that no item is repeated inherently.
How can i use counter for ng-repeat values?? . I have used a 2 functions add and minus quantity and called those function in controller. The problem is when i click add or minus the counter does increase or decrease for all the ng-repeat datas . i want to increase or decrease quantity for each and every product..can anyone post a sample code or for the screenshot below ??
Screenshot
controller.js
.controller('grocery', function($scope, $http) {
$http.get('/groceryjson.json')
.success(function(response) {
$scope.mydata = response;
$scope.booking = [];
$scope.toggle = function(image) {
$scope.selectedImage = image.product_name;
$scope.selected_can_rate = image.can_rate;
$scope.product_name = image.product_name;
/* $scope.register.product_name = image.product_name;*/
$scope.can_path = image.can_path;
/*$scope.register.can_path = image.can_path;*/
$scope.booking.push(image)
console.log($scope.booking);
};
})
$scope.myEvent = function() {
window.location = "#/app/booking";
}
$scope.canqty = 0;
$scope.addqty = function(no){
$scope.canqty++
}
$scope.subqty = function(no){
if($scope.canqty >=1){
$scope.canqty--
}
};
})
grocery.html
<ion-view view-title="Grocery">
<ion-floating-button ng-click="myEvent()" has-footer="false" button-color="#2AC9AA" icon="ion-plus" iconColor="#fff">
</ion-floating-button>
<ion-content>
<div class="row" ng-click="toggle(image)" ng-repeat="image in mydata">
<div class="col col-30 grocery-img">
<img src="{{image.can_path}}" alt="{{image.product_name}}">
</div>
<div class="col col-30">
<div class="grcoery-header">
{{image.product_name}}
</div>
<!-- <div class="grocery-desc">
{{data.desc}}
</div> -->
</div>
<div class="col col-40">
<div class="grocery-buy">
<a class="button buy">Add</a>
</div>
</div>
</div>
<div class="row" ng-repeat="data in booking track by $index">
<div class="col col-40">
<img src="{{data.can_path}}" alt="{{data.product_name}}" style="width:100px;">
</div>
<div class="col col-60">
<div class="row">
<div class="col col-30">
<button class="add" ng-click="addqty(no)"></button>
</div>
<div class="col col-30" >
<div class="canqty-2">{{canqty}}</div>
</div>
<div class="col col-30">
<button class="minus" ng-click="subqty(no)"></button>
</div>
</div>
</div>
</div>
</ion-content>
</ion-view>
The problem here is that you try to change a variable that is attached to your $scope principal, no contain in your object.
So something like that should work :
View:
<div class="row" ng-repeat="data in booking track by $index">
<div class="col col-40">
<img src="{{data.can_path}}" alt="{{data.product_name}}" style="width:100px;">
</div>
<div class="col col-60">
<div class="row">
<div class="col col-30">
<button class="add" ng-click="addqty(data)"></button>
</div>
<div class="col col-30" >
<div class="canqty-2">{{data.canqty}}</div>
</div>
<div class="col col-30">
<button class="minus" ng-click="subqty(data)"></button>
</div>
</div>
</div>
</div>
Controller :
$scope.addqty = function(data){
data.canqty++
}
$scope.subqty = function(data){
if($scope.canqty >=1){
data.canqty--
}
I'm using the Ionic 1.3.16 version currently. Here i need to select multiple list items in the below list.
<div class="list listbox" ng-if="MemberData.length" ng-repeat="d in MemberData">
<div class="item item-avatar item-list-detail item-thumbnail-left thumnail_box">
<img ng-if="d.ThumbnailUrl" src="{{d.ThumbnailUrl}}" class="imground">
<div ng-if="d.ThumbnailUrl==''|| d.ThumbnailUrl==null" class="item-icon-left">
<div><i class="icon ion-person bgskyblue iconx dashboardsquare"></i></div>
</div>
<h3 class="spaceWrap"><b>{{d.Name}}</b></h3>
<p class="spaceWrap">
<span class="small"><i class="icon ion-location"> </i>{{d.Location}}</span>
</p>
</div>
</div>
Screen Shot of the list page:
Use the ng-click directive:
<div class="item" ng-click="clicked(d)" ng-class="{ active: d.selected }">
<h3 class="spaceWrap"><b>{{d.Name}}</b></h3>
</div>
controller:
var selected = [];
$scope.clicked = function (member) {
var index = selected.indexOf(member);
if(index > -1) {
selected.splice(index, 1);
member.selected = false;
} else {
selected.push(member);
member.selected = true;
}
}
JSFIDDLE
I have an array created from a .csv file that I show all of on initial page load, but after a button click, I would like to display only the results of the name of the building the user clicks on.
Here is the html code:
<div class="row" data-ng-controller="StaffListCtrl">
<div class="small-12 columns" >
<h1 class="">The Public Schools of Petoskey Staff</h1>
<header ng-include="'pages/header.html'"></header>
<div class="row">
<div class="small-2 columns"><h4>BUILDING</h4></div>
<div class="small-3 columns"><h4>NAME</h4></div>
<div class="small-2 columns"><h4>PHONE</h4></div>
<div class="small-4 columns"><h4>EMAIL</h4></div>
</div>
<div class="row" id="centralBuilding" data-ng-model="buildingName.central" ng-repeat="person in staff">
<div class="small-2 columns">{{ person.getBuilding() }}</div>
<div class="small-3 columns">{{ person.getFirstName() }} {{ person.getLastName() }}</div>
<div class="small-2 columns">{{ person.getPhone() }}</div>
<div class="small-4 columns">{{ person.getEmail() }}</div>
</div>
</div>
<footer ng-include="'pages/footer.html'"></footer>
</div>
Here is the header.html code:
<div class="row">
<button class="round" id="building1">Building1</button>
<button class="round" id="building2">Building2</button>
<button class="round" id="building3">Building3</button>
</div>
Here is my AngularJS code:
app.js:
(function () {
"use strict";
angular.module('staffApp', []);
})();
controller.js:
(function() {
"use strict";
angular.module('staffApp')
.controller('StaffListCtrl', listStaff);
function listStaff($scope) {
$scope.filters = {};
$scope.staff = setStaffData();
}
})();
If person is an object like
var person = {
building: "",
firstName: "",
lastName: "",
phone:"",
email: ""
}
HTML
<div class="row" id="centralBuilding" data-ng-model="buildingName.central" ng-repeat="person in staff | filter : {building = filterBuilding}">
<div class="small-2 columns">{{ person.getBuilding() }}</div>
<div class="small-3 columns">{{ person.getFirstName() }} {{ person.getLastName() }}</div>
<div class="small-2 columns">{{ person.getPhone() }}</div>
<div class="small-4 columns">{{ person.getEmail() }}</div>
</div>
<div class="row">
<button class="round" id="building1" ng-click="filterByBuilding('Building1')>Building1</button>
<button class="round" id="building2" filterByBuilding('Building2'>Building2</button>
<button class="round" id="building3" filterByBuilding('Building3'>Building3</button>
</div>
CONTROLLER
function filterByBuilding(building){
$scope.filterBuilding = building;
}
In the fiddle which you have given I have found only a slight mistake
Instead of $scope.filterByBuilding you have mentioned as $scope.filterBuilding
Used data/staff2.csv instead of staffList.csv
Take a look at this working demo
Working Demo
script
(function () {
"use strict";
angular
.module('staffApp', [])
.controller('StaffListCtrl', MainCtrl);
function MainCtrl($scope) {
$scope.staff = setStaffData();
$scope.filterByBuilding = function(building) {
$scope.filterBuilding = building;
};
}
})();
html
<body ng-app="staffApp">
<div class="row" data-ng-controller="StaffListCtrl">
<div class="small-12 columns">
<h1 class="">Staff List</h1>
<div class="row">
<button class="round" id="buildingA" ng-click="filterByBuilding('buildingA')">Building A</button>
<button class="round" id="buildingB" ng-click="filterByBuilding('buildingB')">Building B</button>
</div>
<div class="row">
<div class="small-2 columns">
<h4>BUILDING</h4>
</div>
<div class="small-3 columns">
<h4>NAME</h4>
</div>
<div class="small-2 columns">
<h4>PHONE</h4>
</div>
<div class="small-4 columns">
<h4>EMAIL</h4>
</div>
</div>
<div class="row" data-ng-repeat="person in staff | filter:{building:filterBuilding}">
<div class="small-2 columns">{{ person.getBuilding() }}</div>
<div class="small-3 columns">{{ person.getFirstName() }} {{ person.getLastName() }}</div>
<div class="small-2 columns">{{ person.getPhone() }}</div>
<div class="small-4 columns">{{ person.getEmail() }}</div>
</div>
</div>
</div>
</body>