<div ui-view="page"></div>
angular.module('myApp',[]);
angular.module('myApp')
.controller('myCtrl',[ '$scope',
function($scope){
$scope.options = [
{name:'text1'},
{name:'text2'}
];
$scope.selectedText = $scope.options[0];
}
])
.directive('myDirective', [ function () {
return {
restrict: 'AE',
scope: {
selectedValue: '=ngModel',
},
templateUrl: 'directive-template.html',
link: function(scope,elem,attrs) {
},
controller: function($scope) {
$scope.isChosen = function(v) {
return $scope.selectedValue == v;
};
}
};
}])
;<body ng-controller="myCtrl">
<p>Hello world!</p>
<select ng-model="selectedText" ng-options="opt.name for opt in options"></select>
<div ng-model="selectedText.name" my-directive=""></div>
</body><div>
<h1 ng-show="isChosen('text1')"> ТЕКСТ 1 </h1>
<h1 ng-show="isChosen('text2')"> ТЕКСТ 2 </h1>
</div>Как сделать на angular так, чтобы при нажатии "заказать" парсились данные товара
<div ng-repeat="disk in disks | filter:search" class="product-block {{disk.Genre}}"><img id="{{disk.ID}}_img" src="img/{{disk.Image}}" alt=""><a href="" id="{{disk.ID}}">Заказать</a><button type="button">Заказать</button><button type="button" ng-click="order(disk)">Заказать</button>// Где-то внутри Вашего контроллера
// $scope.orderList - список заказов
$scope.order = function(disk) {
// Добавляем заказ. Будет выглядеть примерно так:
$scope.orderList.push(disk);
}Товары, добавленные в корзину, храню в localstorage, так вот: как его очистить, чтобы данные на странице обновились без перезагрузки страницы?
$scope.clearAllOrders = function() {
$scope.orderList.length = 0;
}<button type="button" ng-click="del(disk)">Отменить заказ</button>// Где-то внутри Вашего контроллера
$scope.del= function(disk) {
// Удаляем заказ. Будет выглядеть примерно так:
// Получаем индекс диска в массиве $scope.orderList
// Будьте внимательные - поиск идет по ссылке, а не по значению
var diskIndex = $scope.orderList.indexOf(disk) ;
$scope.orderList.splice(diskIndex,1);
}То есть удаляется конкретный объект из массива и localstorage сохраняется с новыми данными.
reloader() - функция перезагрузки страницы.
Так вот, интересует как это можно реализовать без перезагрузки страницы.
// $scope.orderList - массив заказов
$scope.$watch('orderList',function(nv,ov){
localStorageService.set('ключ',angular.toJson(nv));
});$(function() {
$(".group").draggable({
containment: 'document',
zIndex: 9999,
helper: 'clone',
appendTo: '.anotherDiv'
}).on("drag",function(e){
// Когда начинаем перемещать - удаляем оригинал
$(this).remove();
});
});$(function() {
// При нажатии кнопки мышки на элементе
$(".group").mousedown(function(e){
var $this = $(this);
// Клонируем оригинал
var clonedNode = $this.clone();
// Устанавливаем координаты и абсолютное позиционирование относительно body
// Чтобы вставить новый блок в то же место где был оригинал
clonedNode.css($this.offset());
clonedNode.css({position:'absolute'});
// Делаем элемент перетаскиваемым
clonedNode.draggable({
containment: 'document',
zIndex: 9999,
appendTo: '.anotherDiv'
});
// Добавляем клон на страницу (в body), а оригинал - удаляем
$('body').append(clonedNode);
$this.remove();
// Говорим клону, что на него пользователь нажал мышкой (начал перетаскивать)
clonedNode.trigger(e);
});
});$(function() {
// Для всех элементов инициализируем draggable
$(".group").map(initDraggable);
// Инициализируем droppable
$(".anotherDiv").droppable({
accept: '.group',
drop: function(event, ui) {
// Если мы успешно бросаем элемент - клонируем его
// Не забудем удалить класс hiddenGroup - т.к. оригинал перетаскиваемого элемента был спрятан
$(this).append($(ui.draggable).clone().removeClass('hiddenGroup'));
// Удалим оригинал
$(ui.draggable).remove();
}
});
function initDraggable(){
// Сохраняем элемент
var $el = $(this);
$el.draggable({
containment: 'document',
zIndex: 9999,
helper: 'clone',
appendTo: '.anotherDiv',
revert: function(isValidDrop){
// Эта функция вызывается, когда элемент закончили перетаскивать
// Параметр isValidDrop - истина, если элемент успешно перетащен (его бросили в контейнер anotherDiv)
if(!isValidDrop){
// Если же элемент был брошен не там, то сделаем оригинал снова видимым
// (клон пропадет, если мы вернем false см. ниже)
$el.removeClass('hiddenGroup');
}
// По-хорошему надо возвращать !isValidDrop, но тогда при отмене перетаскивания
// будет анимация (блок полетит обратно на свое место)
// и одновременно с этим будет показан оригинал (из условия выше) - выглядит некрасиво
return false;//!isValidDrop;
}
}).on("drag",function(e){
// При начале перетаскивания - прячем оригинальный блок
$el.addClass('hiddenGroup');
});
}
});$(function() {
$(".group").map(initDraggable);
$(".anotherDiv").droppable({
accept: '.group',
drop: function(event, ui) {
// Добавим position: absolute
// И клонируем наш хэлпер, а не оригинал
var $cloned = $(ui.helper).clone().addClass('droppedGroup');
$(this).append($cloned);
initDraggable.apply($cloned);
$(ui.draggable).remove();
}
});
function initDraggable(){
var $el = $(this);
$el.draggable({
containment: 'document',
zIndex: 9999,
helper: 'clone',
appendTo: '.anotherDiv',
start: function(event, ui){
$el.addClass('hiddenGroup');
},
revert: function(isValidDrop){
if(!isValidDrop){
$el.removeClass('hiddenGroup');
}
return false;//!isValidDrop;
}
});
}
});<span onclick="clickHandler()" class="loadvid2">МУЗТВ Онлайн ></span>function clickHandler(){
// Событие 1
setTimeout(function(){
// Событие 2, через 5 секунд
}, 5000);
return false;
}$('.my_input').keyup( function() {
var $this = $(this);
var v = parseInt($this.val(), 10);
if(v >= 100000)
{
$('.my_div').show();
}
});$scope.getTotalAmount = function(index){
//тут посложнее логика
if(!$scope.billings.$resolved)
return 0;
return $scope.billings[index].bills;
}$scope.getTotalAmount = function(index){
//тут посложнее логика
if(!$scope.billings[index])
return 0;
return $scope.billings[index].bills;
}function getTotal() {
return $scope.customers.length;
}jQuery( html [, ownerDocument ] )
Description: Creates DOM elements on the fly from the provided string of raw HTML.
Почему когда counter() вставить в $('.txt').on('click'...) - не работает?
function makeCounter() {
var currentCount = 0;
return function() {
return ++currentCount;
};
}
var counter = makeCounter();
$('.txt').on('click', function(){
console.log($(this).text());
counter();
});$(function(){
var $lastClicked;
$('.txt').on('click', function(){
$lastClicked = $(this);
});
});return false;<form id="form" action="/cart/add" method="post">
<input type="hidden" value="15>" name="articleId" />
<button type="submit">В корзину</button>
</form>$(function(){
$('#form').submit(function(e) {
var $this = $(this);
var data = {};
$this.find('input').each(function(){
var $el = $(this);
var key = $el.attr('name');
if(key)
data[key] = $el.val();
});
$.post($this.attr('action'),data)
.done(function(r){
console.log('good call back');
})
.fail(function(r){
console.log('bad call back');
});
e.preventDefault();
return false;
});
});jQuery.fn.extend({
myFormSubmit: function(o){
var opts = {
doneCb: function() {},
failCb: function() {}
};
opts = $.extend(opts,o);
return this.each(function(){
$(this).submit(function(e) {
var $this = $(this);
var data = {};
$this.find('input').each(function(){
var $el = $(this);
var key = $el.attr('name');
if(key)
data[key] = $el.val();
});
$.post($this.attr('action'),data)
.done(opts.doneCb)
.fail(opts.failCb);
e.preventDefault();
return false;
});
});
}
});
$(function(){
$('#form').myFormSubmit({
doneCb: function(r){
console.log('good call back');
},
failCb: function(r){
console.log('bad call back');
}
});
});{
...
"scripts": {
...
"start": "http-server -a localhost -p 8000 -c-1",
...
}
...
}function(){
btn_status = 'номер_кнопки';
}switch(btn_status){
// ..
}btn_3.onclick = function(){
btn_status = '3';
}$(btn_3).click(function(){
btn_status = '3';
});$(btn_3).click(function(){
btn_status = '3';
$(this).css({
marginLeft : '5px'
});
});