小编m59*_*m59的帖子

如何访问和使用ng-repeat中每个项目的索引

我有一个表格,其中每行的最后一列包含一个小的加载图标,我想在单击表格内的按钮时显示该图标.

当使用ng-repeat生成每个表行时,加载器将显示在每一行而不是单独的一行中.如何仅针对当前单击的索引将ng-show设置为true或false?

模板:

<tr ng-repeat="record in records">
  <td>{{ record.name }}</td>
  <td><a ng-click="someAction(record.name)">Some Action</a></td>
  <td ng-show="loading">Loading...</td>
</tr>
Run Code Online (Sandbox Code Playgroud)

控制器:

$scope.someAction = function(recordName) {
  $scope.loading = true;
};
Run Code Online (Sandbox Code Playgroud)

javascript angularjs angularjs-ng-repeat

9
推荐指数
2
解决办法
2万
查看次数

RxJS flatMapLatest不是一个函数

使用RxJs我试图重现一个演示.但我没有得到任何结果.而是将错误视为:distinct.flatMapLatest is not a function

我在这做错了什么?我需要在library这里添加吗?

这是我的尝试:但是看一下demo来获得真正的问题是什么面孔.

$(document).ready(function(){

var $input = $('#input'),
    $results = $('#results');

var keyups = Rx.Observable.fromEvent($input, 'keyup')
    .map(e => e.target.value)
    .filter(text => text.length > 2);

var throttled = keyups.throttle(500);

var distinct = throttled.distinctUntilChanged();

function searchWikipedia (term) {
    return $.ajax({
        url: 'http://en.wikipedia.org/w/api.php',
        dataType: 'jsonp',
        data: {
            action: 'opensearch',
            format: 'json',
            search: term
        } 
    }).promise();

}


var suggestions = distinct.flatMapLatest(searchWikipedia);

suggestions.subscribe(data => {
    var res = data[1];
    /* Do something with the data like …
Run Code Online (Sandbox Code Playgroud)

javascript rxjs

9
推荐指数
1
解决办法
2265
查看次数

获取ng-repeat以使用对象属性顺序

我有一个动态数据集来呈现Angular.换句话说,我无法访问在运行时返回的列名.

我可以将列名称作为标题和数据本身显示没有问题.ng-repeat(或者它可能是JS本身)虽然拒绝按照创建的顺序返回列.您可以在小提琴中看到列被排序,因此它们显示为"年龄名称重量",我需要它们的方式,"名称年龄重量"

我创建了另一个列名称数组及其正确的顺序($ scope.order),但我似乎找不到使用Angular对数据进行排序的方法.

请给我一个按原始顺序显示此数据的方法.

我创建了一个JSFiddle:http://jsfiddle.net/GE7SW/

这是一个设置数据的简单范围:

function MainCtrl($scope) {
$scope.output = [
    {
        "name": "Tom",
        "age": "25",
        "weight" : 250
    },
    {
        "name": "Allan",
        "age": "28",
        "weight" : 175
    },
    {
        "name": "Sally",
        "age": "35",
        "weight" : 150
    }
];

$scope.order = {
    "name": 1,
    "age": 2,
    "weight" : 3
};           
}
Run Code Online (Sandbox Code Playgroud)

这是HTML:

<table ng-app ng-controller="MainCtrl">
  <thead>
    <tr>
      <th ng-repeat="(key,value) in output.0">{{key}}</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="row in output">          
      <td ng-repeat="(key,value) in row">{{value}}</td>
    </tr>
  </tbody>
</table> …
Run Code Online (Sandbox Code Playgroud)

angularjs

8
推荐指数
1
解决办法
5339
查看次数

AngularJS多级下拉菜单,用于从递归指令生成的菜单结构

我这里有一个泡菜.我必须通过webservice调用获取我的多级导航菜单.

由于我的导航菜单中可以包含无限量的子菜单,因此我不得不使用递归指令来构建我的父/子导航结构.现在我想弄清楚如何将它变成一个功能性的dropmenu结构.我正在看看angularui-bootstrap,他们有一个Dropdown Toggle,它有一些基本的dropmenu功能,但由于我使用了递归指令,我的菜单结构已经有了angularjs生成的css类附加到它们.angularjs-bootstrap dropmenu有css类,它们与我的angularjs生成的类不同....看哪!

<ul>
    <li ng-repeat="parent in parents" class="ng-scope">
        <recursive-list-item on-node-click="onNodeClickFn(node)" parent="parent" class="ng-isolate-scope ng-scope">
            <a data-ng-click="onNodeClick({node: parent})" href="javascript:void(0)" class="ng-scope ng-binding">Clothes</a>
            <!-- ngIf: parent.children.length > 0 -->
            <ul data-ng-if="parent.children.length &gt; 0" class="ng-scope">
                <!-- ngRepeat: child in parent.children -->
                <li ng-repeat="child in parent.children" class="ng-scope">
                    <recursive-list-item data-on-node-click="onNodeClickFn(node)" data-parent="child" class="ng-isolate-scope ng-scope">
                        <a data-ng-click="onNodeClick({node: parent})" href="javascript:void(0)" class="ng-scope ng-binding">Gortex Jackets</a>
                        <!-- ngIf: parent.children.length > 0 -->
                    </recursive-list-item>
                </li>
                <!-- end ngRepeat: child in parent.children -->
                ...
                ...
                ...
            </ul>
        </recursive-list-item>
    </li>
    <!-- end ngRepeat: child …
Run Code Online (Sandbox Code Playgroud)

javascript angularjs angularjs-directive angularjs-bootstrap

8
推荐指数
1
解决办法
3万
查看次数

使用AngularJS观看整个对象(深度观察)

这是angular-resource variable / object表示表单数据的范围:

    $scope.form = {
              name: 'bob', 
              email: 'bob@bobs.com'
    }
Run Code Online (Sandbox Code Playgroud)

我可以通过各种方式观察name变量的变化.

    $scope.$watch('form.name', function(newVal) {
        if(newVal) {
            alert(newVal)
        }
    });
Run Code Online (Sandbox Code Playgroud)

如果更改了任何文件,可以使用什么方法 - 名称,电子邮件或任何scope.form可能有的?

我的目的是根据用户在表单上更改某些内容的事实禁用或启用我的表单"保存".

javascript angularjs

8
推荐指数
1
解决办法
5896
查看次数

具有多个父母的子状态/模态路径,可在多个州打开

我有一个抽象profile状态,它有多个子状态(对于配置文件页面的不同选项卡),然后我希望另一个子状态的配置文件是一个模态.我已经实现了这样的事情:

$stateProvider
    .state('profile', {
        url: '/profile/:profileID',
        templateUrl: 'profile.html',
        controller: 'ProfileCtrl',
        abstract:true,
        resolve: {
            user: ...
        }
    })
    .state('profile.circles', {
        url: '',
        templateUrl: 'profilecircles.html',
        controller: 'profilecirclesCtrl',
        resolve: { circle: ... }
    })
    .state('profile.squares', {
        url: '/collections',
        templateUrl: 'profilesquares.html',
        controller: 'profilesquaresCtrl',
        resolve: { squares: ... }
    })
    .state('profile.editprofile', {
        url: '/edit',
        onEnter: ['$window','$modal', function($window, $modal) {
            $modal.open({
                templateUrl: 'editprofile.html',
                controller: 'editProfileCtrl',
                resolve: {
                    user: ...
                }
            }).result.then(function() {
                $window.history.back();
            },function() {
                $window.history.back();
            });
        }]
    })
Run Code Online (Sandbox Code Playgroud)

这很有效,除了因为editprofile是正方形和圆形的兄弟,当该状态处于活动状态并且模态处于视图中时,正方形或圆形状态被卸载,并在模态关闭时再次加载.

当profile.editprofile状态处于活动状态时,有没有办法让这些状态保持活动状态?我喜欢的东西state..editprofile.

angularjs angular-ui-router

8
推荐指数
1
解决办法
3346
查看次数

使文本输入框透明?应该简单吗?

我正在尝试使我的表单输入透明,并将其放在我的div之上.基本上我希望文本字段对其背后的任何内容都是透明的.有什么建议?

<head>

<style type="text/css">
  .WRAPPER {
    background-color: #000;
    height: 575px;
    width: 975px;
    background-image: url(exit-gate/exit-gate-bg.png);
    top: auto;
    margin: -8px;
  }

  body {
    background-color: #000;
  } 
</style>

<style type="text/css">
  term {
    background: transparent;
    border: none;
  }
</style>

</head>



<body>
  <div id="WRAPPER"> 
    <div class="term"><input name="email" type="text" id="email">
      <form name="form1" method="post" action="insert_ac.php">
        <input type="image" src="exit-gate/white-box-10.png" alt="{alternate text}" name="submit" value="submit">
      </form>
    </div>
  </div>
</body>
</html>
</div>
Run Code Online (Sandbox Code Playgroud)

html css forms

7
推荐指数
2
解决办法
4万
查看次数

有没有办法在ng-messages中将minlength/maxlength的值插入到消息中?

我想,而不只是告诉他们"你的字段太短"告诉用户,"你的字段必须至少{{ value }}字符长".你能用ng-messages做到这一点吗?

angularjs

7
推荐指数
1
解决办法
267
查看次数

如何否定 JS 中的 bool 内部函数?

我现在正在编写一些脚本,但在尝试否定函数内的布尔值时遇到了问题。我的意思是:

var test = true;

function changeThisBoolPlease(asd){
  asd=!asd;
}

alert(test);
  changeThisBoolPlease(test);
alert(test);
Run Code Online (Sandbox Code Playgroud)

警报为真,然后为真。

有任何想法吗?JS 引用不是很完美吗?

编辑:

好的,这只是我功能的一部分:

function przesun(kolor, figury, castlings, x1, y1, x2, y2, strona) {
    kolor = nowaPozycjaKolor(kolor,x1, y1, x2, y2);
    figury = nowaPozycjaFigur(figury,x1, y1, x2, y2);
    strona = !strona;
}
Run Code Online (Sandbox Code Playgroud)

实际上我不能返回这个值。如何?

javascript boolean negate

6
推荐指数
1
解决办法
2万
查看次数

如何将元素保持在溢出的同一行上

我正在尝试制作一个页面,其中一些div水平对齐,我希望宽度根据内容调整大小,所以如果内容大于屏幕大小,我将获得水平滚动.我有这个:

    <div>
    <div style="width: 300px; height: 300px; background-color: black; margin-left: 10px; float: left;"></div>
    <div style="width: 300px; height: 300px; background-color: black; margin-left: 10px; float: left;"></div>
    <div style="width: 300px; height: 300px; background-color: black; margin-left: 10px; float: left;"></div>
    <div style="width: 300px; height: 300px; background-color: black; margin-left: 10px; float: left;"></div>
    <div style="width: 300px; height: 300px; background-color: black; margin-left: 10px; float: left;"></div>
</div>
Run Code Online (Sandbox Code Playgroud)

子div正在并排排列,但是当达到屏幕大小时,它会分成一个新行.有任何想法吗 ?

html css resize width

6
推荐指数
1
解决办法
9403
查看次数