class ControllerComponent extends Component {
super() {
super(props);
this.state = { itemId: this.getParams().id };
}
//...
render() {
return (
<div>
<p>Blah blah blah</p>
<SomeComponent itemId={this.state.itemId}/>
</div>
);
}
}class ControllerComponent extends Component {
super() {
super(props);
this.state = { itemId: this.getParams().id };
}
componentWillReceiveProps(nextProps) {
this.setState({ itemId: this.getParams().id });
}
//...
render() {
return (
<div>
<p>Blah blah blah</p>
<SomeComponent itemId={this.state.itemId}/>
</div>
);
}
}Calling this.setState() within this function will not trigger an additional render.
resolve: {
validation: function ($q, $routeParams) {
var deferred = $q.defer(),
id = parseInt($routeParams.id, 10);
if (!isNaN(id)) {
deferred.resolve();
} else {
deferred.reject('VALIDATION FAILED');
$location.path('/login');
}
return deferred.promise;
}
}//Relatively targets the unnamed view in this state's parent state <div ui-view/>
"" : { ... }// absolutely targets the unnamed view in root unnamed state.
// <div ui-view/>
"@" : { ... }сервиса (в котором будут храниться актуальные значения инпутов)
автоподсказками, которые будут формироваться из предустановленных значений + тех, которые уже введет в форму
Просто как я понимаю из позиционирования jquery и angularjs - библиотека, упрощенный javascript, а второе - фреймворк, написанный на javascript'е, так?
<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));
});<form name="myForm" ng-submit="yourSubmitFun()">
<input type="text" ng-model="yourModel1" required />
<input type="text" ng-model="yourModel2" required />
<input type="text" ng-model="yourModel3" />
<button type="submit" ng-disabled="myForm.$invalid"> Submit form </button>
</form><select id="autoAppl" class="form-control auto_applications" ng-model="autoApplications">
<option class="auto" value="Y">Да</option>
<option class="auto" value="N" selected>Нет</option>
</select><div class="new_service applications" ng-show="autoApplications == 'Y'">$(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;
}
});
}
});