小编Eri*_*ans的帖子

我有一个关闭面板菜单在网站上完美运行.用户可以使用导航图标或用手指滑动来打开和关闭它.

现在我有一个非常漂亮的导航图标,当点击(并打开菜单)时,从菜单图标转换到X图标,然后再次单击菜单关闭时反之亦然.Buuut如果用户滑动菜单打开或关闭而不是使用navicon,则不会触发转换,这可能会导致UX混淆(即菜单关闭,导航显示X而不是常规的3条水平线图标).

因此,navicon现在具有以下代码来触发转换:

ng-click="open = !open" ng-class="{'open-mob':open}">

我认为解决这个问题的一个简单方法就是在每次菜单打开或关闭时触发"open =!open",因为off面板中的js将类slidRight添加到主要部分时菜单已打开,并在关闭时将其删除.

既然如此,是否有一些直接的方法来检查班级是否使用AngularJS？像class = slidRight - >"open =!open"之类的东西.

谢谢!!

我有一个数组($ scope.paxlist)看起来像这样:

[
   {"name":"Maria","chosen":false},
   {"name":"Jenny","chosen":false},
   {"name":"Ben","chosen":false},
   {"name":"Morris","chosen":false}
]

我只需要从中获取值name并将它们转换为字符串,以便能够正确使用ng-CSV.期望的输出将是这样的:

$scope.var = "Maria, Jenny, Ben, Morris"

考虑到我已经加载了Angular和Lodash,任何人都可以指出他们是否已经有一些工具可以轻松地完成这项工作？

我有一个带有对象的现有数组,并在第一步创建了几个属性.它由以下函数创建:

$scope.recordlist = extractRecordJSONFromLocalStorage();
$scope.addRecord = function () {
    $scope.recordlist.push(
            {
                date: $scope.dateJson, 
                time: $scope.time, 
                car: $scope.carList.code, 
                driver: $scope.driverList.name,
                from: $scope.locationList.place,
                destination: $scope.locationList2.place, 
                pax: $scope.paxList
            }
        );

    $scope.custom = $scope.custom === false ? true: false;
    $scope.carList = 0;
    $scope.driverList = 0;
    $scope.locationList = 0;
    $scope.locationList2 = 0;
    jsonToRecordLocalStorage($scope.recordlist);
};

它导致以下数组:

[{
  "date":"2014 10 16",
  "time":"20.22",
  "car":"396",
  "driver":"Seb",
  "from":"A",
  "destination":"B",
  "pax":"3"
}]

我要做的是在下一步使用ng-click将另一个属性添加到现有对象中.我尝试过以下功能,但它似乎不起作用.

$scope.insertRecord = function (recordlist) {

    var arrival = { 'arrival' : moment().format("HH.mm") }
    console.log(arrival)
    angular.extend($scope.recordlist, arrival)


    jsonToRecordLocalStorage($scope.recordlist);
} …

我正在尝试在元素接收某个类时创建 CSS 过渡。到目前为止，切换更改有效（这意味着 ng-class 工作正常），但动画没有发生。

这是我的代码：

.intro-text{
  height:auto;
  -webkit-transition: height 200ms ease-out;
  -moz-transition: height 200ms ease-out;
  -o-transition: height 200ms ease-out;
  transition: height 200ms ease-out;
}
.intro-text.hide{
  height:0;
}

和 HTML：

<div class="intro-text" ng-class="{'hide':clicked}">
  <h1>Howdy stranger!</h1>
  <h3>Use the form below to search for an artist and start building your record collection!</h3>
</div>

我错过了什么？

编辑：我已将问题缩小到引导程序。如果我包含 bootstrap.min.css，动画就无法工作，没有它，它就完美无缺。知道为什么吗？

编辑2：修复它！问题是 .hide 和 .hidden 都是 Bootstrap 中定义的类，所以它覆盖了我的样式，解析了一个 display:none; 在动画可见之前。当将类更改为另一个名称时，它得到了修复:)

我在我的一个函数中遇到以下错误:

Error: [$interpolate:interr] http://errors.angularjs.org/1.3.0-rc.4/$interpolate/interr?p0=%7B%7B%20crea…&p1=TypeError%3A%20Cannot%20read%20property%20'startDate'%20of%20undefined
    at Error (native)
    at file:///C:/Users/Zuh/Desktop/MSF_Juba_2014/Radio%20Room%20App/angular.min.js:6:421
    at z.exp (file:///C:/Users/Zuh/Desktop/MSF_Juba_2014/Radio%20Room%20App/angular.min.js:86:481)
    at file:///C:/Users/Zuh/Desktop/MSF_Juba_2014/Radio%20Room%20App/angular.min.js:56:215
    at q (file:///C:/Users/Zuh/Desktop/MSF_Juba_2014/Radio%20Room%20App/angular.min.js:7:404)
    at C (file:///C:/Users/Zuh/Desktop/MSF_Juba_2014/Radio%20Room%20App/angular.min.js:56:16)
    at g (file:///C:/Users/Zuh/Desktop/MSF_Juba_2014/Radio%20Room%20App/angular.min.js:50:19)
    at C (file:///C:/Users/Zuh/Desktop/MSF_Juba_2014/Radio%20Room%20App/angular.min.js:57:303)
    at g (file:///C:/Users/Zuh/Desktop/MSF_Juba_2014/Radio%20Room%20App/angular.min.js:50:19)
    at C (file:///C:/Users/Zuh/Desktop/MSF_Juba_2014/Radio%20Room%20App/angular.min.js:57:303) VM8667 angular.min.js:99
Error: [$interpolate:interr] http://errors.angularjs.org/1.3.0-rc.4/$interpolate/interr?p0=%7B%7B%20crea…&p1=TypeError%3A%20Cannot%20read%20property%20'startDate'%20of%20undefined
    at Error (native)
    at file:///C:/Users/Zuh/Desktop/MSF_Juba_2014/Radio%20Room%20App/angular.min.js:6:421
    at z.exp (file:///C:/Users/Zuh/Desktop/MSF_Juba_2014/Radio%20Room%20App/angular.min.js:86:481)
    at pre (file:///C:/Users/Zuh/Desktop/MSF_Juba_2014/Radio%20Room%20App/angular.min.js:66:455)
    at U (file:///C:/Users/Zuh/Desktop/MSF_Juba_2014/Radio%20Room%20App/angular.min.js:68:177)
    at C (file:///C:/Users/Zuh/Desktop/MSF_Juba_2014/Radio%20Room%20App/angular.min.js:57:169)
    at g (file:///C:/Users/Zuh/Desktop/MSF_Juba_2014/Radio%20Room%20App/angular.min.js:50:19)
    at C (file:///C:/Users/Zuh/Desktop/MSF_Juba_2014/Radio%20Room%20App/angular.min.js:57:303)
    at g (file:///C:/Users/Zuh/Desktop/MSF_Juba_2014/Radio%20Room%20App/angular.min.js:50:19)
    at C (file:///C:/Users/Zuh/Desktop/MSF_Juba_2014/Radio%20Room%20App/angular.min.js:57:303) VM8667 angular.min.js:99
3TypeError: Cannot read property 'car' of undefined
    at k.$scope.createCsvFilename (file:///C:/Users/Zuh/Desktop/MSF_Juba_2014/Radio%20Room%20App/js/msfcontroller.js:26:31)
    at file:///C:/Users/Zuh/Desktop/MSF_Juba_2014/Radio%20Room%20App/angular.min.js:191:296 …

我正在使用Tablesaw插件来获取响应表.

在某些时候,我需要在Bootstrap Carousel的不同项目/幻灯片中包含不同的表格.

在加载时,Carousel的活动项目上的表格将正确显示(Tablesaw正确启动),但是一旦我移动到下一个幻灯片/项目,其中的表格将无法正确显示(Tablesaw未启动).

Tablesaw包含一个额外的JS文件,可在加载时启动:

$( function(){
    $( document ).trigger( "enhance.tablesaw" );
});

这似乎适用于第一张幻灯片/项目,但不适用于其余部分.

有关为什么会发生这种情况的任何线索？

我创建了一个Plunker来说明问题.

我有一个ng-repeat显示产品列表,每个产品都有一个输入.我希望能够将每个输入的值与每个项目中的参数一起推送到新数组中以创建订单.

到目前为止,我设法单独完成,但不是全部.

这是我的HTML:

<div ng-repeat="pa in products">
  <div>
    <h2>{{pa.nom}}</h2>
    <input type="number" ng-model="basket" min="0" max="20" step="1" ng-init="basket=0">
  </div>
</div>
<a ng-click="insert(pa.nom,basket)">Add items</a>

功能:

$scope.singleorder = [];

$scope.insert = function(nom, basket){
  $scope.singleorder.push({
    'product': nom,
    'number': basket
  });
  console.log($scope.singleorder);
}

我认为问题与跟踪每个重复的输入的不同模型有关,但我不知道如何处理它.

我也尝试ng-change在输入上单独添加每个项目,但它会在每次更改时推送一个对象,在每次更改时复制该项目,因此它将无法工作.

有小费吗？

我正在使用Bootstrap 3构建一个投资组合网站,使用轮播作为完整背景.我想要的是能够显示加载gif,直到每个网站的图像阵列被加载,因为图像将是大的.

这是我正在使用的HTML代码.

<div class="carousel-inner">
  <div class="item active">
    <img src="./img/bg_01.jpg" alt="" />
    <div class="container">
      <div class="carousel-caption">
      </div>
    </div>
  </div>

  <div class="item">
    <img src="./img/bg_02.jpg" alt="" />
    <div class="container">
      <div class="carousel-caption">
      </div>
    </div>
  </div>
</div>

我已经google了关于图像预加载但我找不到任何非常适合我想要的内容.我应该关注哪个方向？也许ajax/jquery插件？

谢谢!埃里克

我需要从我正在使用的 WordPress 插件中更改函数的值。

如果我在原始插件文件中执行它，它可以完美运行，但我宁愿将它放在文件functions.php 中以避免插件更新出现问题。

我需要改变这个：

public static function loop_shop_per_page() {
    return get_option( 'posts_per_page' );
}

进入这个：

public static function loop_shop_per_page() {
    return '-1';
}

我将如何在文件functions.php 中创建一个过滤器来做到这一点？

我有一个ng-repeat,它将生成一个div元素列表.我想要做的是,对于这些元素中的每一个,函数将触发并获得特定于ng-repeat的每个div的图像URL.

我创建了一个Plunker,如果你搜索一个艺术家,它将生成一个版本列表,如果你点击它们中的每一个,将出现封面艺术,buuut它将出现与每个div相同的图像!

长话短说,如何自动化过程(不需要ng-click)并使每个图像填充每个相应的div？

Plunker

这是应该由ng-repeat的每个元素分别触发的函数:

$scope.getImages = function (title, name) {
    $http.get('http://ws.audioscrobbler.com/2.0/?method=album.getinfo&api_key=e8aefa857fc74255570c1ee62b01cdba&artist=' + name + '&album='+ title +'&format=json').
      success(function(data4) {
          $scope.images = data4;
      });
  }

我正在尝试使用AngularJS从API获取图像.

我正在使用一个链接来触发$ http函数,并尝试将图像URL从JSON响应解析回HTML,但我想我错过了一些东西,因为响应回来了OK,但是img url没有"得到"到位".

这是我的HTML:

<a ng-click="getImages()">Image: <img src="{{album.image.2.#text}}" /></a>

我的JS:

$scope.getImages = function () {
  $http.get('http://ws.audioscrobbler.com/2.0/?method=album.getinfo&api_key=%%%&artist=vnv+nation&album=empires&format=json').
    success(function(data4) {
        $scope.images = data4;
    });
}

以及JSON响应的示例:

album: {name:Empires, artist:VNV Nation, id:2025273, mbid:0c3ccb9f-e6c4-419d-934e-02e3be8a08c9,…}
artist: "VNV Nation"
id: "2025273"
image: [{#text:http://userserve-ak.last.fm/serve/34s/93873429.png, size:small},…]
   0: {#text:http://userserve-ak.last.fm/serve/34s/93873429.png, size:small}
   1: {#text:http://userserve-ak.last.fm/serve/64s/93873429.png, size:medium}
   2: {#text:http://userserve-ak.last.fm/serve/174s/93873429.png, size:large}
       #text: "http://userserve-ak.last.fm/serve/174s/93873429.png"
       size: "large"

编辑:我做了一个Plunker.您可以在控制台中看到如何正确调用json响应,但仍未显示图像URL.