欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

angular-ui-sortable實(shí)現(xiàn)可拖拽排序列表

 更新時(shí)間:2016年12月28日 09:20:38   作者:justforuse  
這篇文章主要介紹了angular-ui-sortable實(shí)現(xiàn)可拖拽排序列表,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下

項(xiàng)目需求,添加列表可拖拽排序功能,谷歌了一下,找到一個(gè)Angular的插件:angular-ui-sortable,項(xiàng)目地址:https://github.com/angular-ui/ui-sortable

需要在之前引入jquery,和jquery-ui,否則無(wú)法使用。

我們要做的事情,加載數(shù)據(jù),拖拽排序并輸出當(dāng)前順序:

js代碼:

<script src="../../jquery.js"></script>
<script src="../../jquery-ui.js"></script>
<script src="../../angular.js"></script>
<script src="ui-sortable/src/sortable.js"></script>
<script>
 angular.module("app", ["ui.sortable"])
  .controller("sortCtrl", function($scope, $timeout) {
   $scope.cannotSort = false;
   $scope.data = [{
    "name": "allen",
    "age": 21,
    "i": 0
   }, {
    "name": "bob",
    "age": 18,
    "i": 1
   }, {
    "name": "curry",
    "age": 25,
    "i": 2
   }, {
    "name": "david",
    "age": 30,
    "i": 3
   }];

   $scope.sortableOptions = {
    // 數(shù)據(jù)有變化
    update: function(e, ui) {
     console.log("update");
     //需要使用延時(shí)方法,否則會(huì)輸出原始數(shù)據(jù)的順序,可能是BUG?
     $timeout(function() {
      var resArr = [];
      for (var i = 0; i < $scope.data.length; i++) {
       resArr.push($scope.data[i].i);
      }
      console.log(resArr);
     })


    },

    // 完成拖拽動(dòng)作
    stop: function(e, ui) {
     //do nothing
    }
   }
  })
</script>

html代碼:

<body>
 <div ng-controller="sortCtrl">
  <ul ui-sortable="sortableOptions" ng-model="data">
   <li ng-repeat="item in data ">
    <span>{{item.name}}, {{item.age}}</span>
   </li>
  </ul>
 </div>
</body>


效果:

我又另外添加了數(shù)據(jù)排序功能,不能直接使用orderBy篩選器,這樣每次移動(dòng)都會(huì)重新排序,需要使用orderByFilter和$watchCollection來(lái)實(shí)現(xiàn)效果,具體可查看地址:https://github.com/justforuse/Pro_Angular-demo/tree/master/draggable-list

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • 基于AngularJS的簡(jiǎn)單使用詳解

    基于AngularJS的簡(jiǎn)單使用詳解

    下面小編就為大家?guī)?lái)一篇基于AngularJS的簡(jiǎn)單使用詳解。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就想給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2017-09-09
  • AngularJS操作鍵值對(duì)象類似java的hashmap(填坑小結(jié))

    AngularJS操作鍵值對(duì)象類似java的hashmap(填坑小結(jié))

    我們知道java的hashmap中使用最多的是put(...),get(...)以及remove()方法,那么在angularJS中如何創(chuàng)造(使用)這樣一個(gè)對(duì)象呢?今天小編通過(guò)本文給大家分享下,感興趣的朋友一起學(xué)習(xí)吧
    2016-11-11
  • AngularJS入門教程之服務(wù)(Service)

    AngularJS入門教程之服務(wù)(Service)

    本文主要介紹 AngularJS Service,這里整理了AngularJS Servic的詳細(xì)資料,并提供代碼實(shí)例,有需要的小伙伴可以參考下
    2016-07-07
  • Angular應(yīng)用里環(huán)境變量SERVER_REQUEST_ORIGIN含義解析

    Angular應(yīng)用里環(huán)境變量SERVER_REQUEST_ORIGIN含義解析

    這篇文章主要為大家介紹了Angular應(yīng)用里環(huán)境變量SERVER_REQUEST_ORIGIN的含義解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-10-10
  • 使用Angular9和TypeScript開(kāi)發(fā)RPG游戲的方法

    使用Angular9和TypeScript開(kāi)發(fā)RPG游戲的方法

    這篇文章主要介紹了使用Angular9和TypeScript開(kāi)發(fā)RPG游戲的方法,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2020-03-03
  • 詳解如何在Angular應(yīng)用中發(fā)起HTTP?302 redirect

    詳解如何在Angular應(yīng)用中發(fā)起HTTP?302 redirect

    這篇文章主要介紹了如何在Angular應(yīng)用中發(fā)起HTTP 302 redirect詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-12-12
  • Angular的MVC和作用域

    Angular的MVC和作用域

    本文主要Angular的MVC和作用域進(jìn)行詳細(xì)分析介紹,具有一定的參考價(jià)值,下面跟著小編一起來(lái)看下吧
    2016-12-12
  • AngularJS過(guò)濾器詳解及示例代碼

    AngularJS過(guò)濾器詳解及示例代碼

    本文主要介紹AngularJS過(guò)濾器,這里整理了詳細(xì)的資料和提供了示例代碼及實(shí)例效果圖,有興趣的小伙伴可以參考下
    2016-08-08
  • Angular.js通過(guò)自定義指令directive實(shí)現(xiàn)滑塊滑動(dòng)效果

    Angular.js通過(guò)自定義指令directive實(shí)現(xiàn)滑塊滑動(dòng)效果

    這篇文章主要給大家介紹了關(guān)于Angular.js如何通過(guò)自定義指令directive實(shí)現(xiàn)滑塊滑動(dòng)的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用angularjs具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起看看吧。
    2017-10-10
  • 詳解AngularJS臟檢查機(jī)制及$timeout的妙用

    詳解AngularJS臟檢查機(jī)制及$timeout的妙用

    本篇文章主要介紹了詳解AngularJS臟檢查機(jī)制及$timeout的妙用,“臟檢查”是Angular中的核心機(jī)制之一,它是實(shí)現(xiàn)雙向綁定、MVVM模式的重要基礎(chǔ),有興趣的可以了解一下
    2017-06-06

最新評(píng)論