标签: ng-repeat

我有一个ng-repeat,它遍历模型中各国的名称.在某些国家/地区名称上,我希望缩写它们以缩短字符串的长度,例如,我希望"北爱尔兰"输出为"N".爱尔兰'.

JSON模型

[
  {
    "id": 1,
    "name": "Italy",
  },

  {
    "id": 2,
    "name": "Northern Ireland",
  },

  {
    "id": 3,
    "name": "Poland",
  }
]

我可以在我的模型中更改名称,但我宁愿保留它,因为我希望原始数据完整.只有在这个特定的例子中我才想要缩写它.

我应该使用ng-repeat过滤器吗？如果是这样,怎么样？
如果没有,还有其他建议吗？

HTML

<md-grid-tile ng-repeat="nation in nationData">

  <img src="img/{{nation.name}}.png">

  <md-grid-tile-footer>
    <h3>{{nation.name | uppercase}}</h3>
  </md-grid-tile-footer>

</md-grid-tile>

我在Angular中遇到过我没想到的行为,这篇文章的目的是找出这是一个错误或是否有意,并可能解释为什么会这样.

首先看看这个Plunkr:http://plnkr.co/edit/CB7k9r？p = preview .在示例中,我创建了一个名为array的数组,其中包含三个对象条目 此外,我根据输入字段的内容(称为切换)创建了一个ng-switch.当toggle的值为1时,它应该打印前缀为"1"的数组中的所有对象名称,否则以"other"为前缀.

这不会按预期工作,它会显示错误:

Error: Argument '?' is required at assertArg 

然而,同样的例子重写(http://plnkr.co/edit/68Mfux?p=preview),列表周围有一个额外的div,ng-switch移动到这个div,ng-switch-从li移到ul(将ng-repeat和ng-switch-when分开)确实按预期工作.

有人可以解释为什么会这样吗？

我使用这个指令,迭代一个数组"myArr",过滤几个条件.

<myDirective 
    myData='item' 
    ng-repeat="item in filteredArr = (myArr | filter:searchField | filter:checkboxFilter)" 
    ng-show="$index < visible" 
/>

这给了我两个问题,我想得到一些意见:

a)ng-show部分在那里,因为我有一个处理这个的条件:

<p>
    <a ng-click='visible=visible+10' ng-show='visible < filteredArr.length'>Show more</a>
</p>

为了显示或隐藏"显示更多"部分.我无法想出切换这个和/或物品本身的另一个想法.一旦我们开始,$ scope.visible在控制器内部设置为10.我无法使用limitTo,因为它不能让我确定是否有更多要显示,因为它当然会"切断"数组到设定的限制.

b)在指令内部,模板打印出一个

<img ng-src="..."> 

标签.只要在上述结构中没有显示这些图像,我怎么能阻止它们加载？

非常感谢提前!

使用数组,我试图过滤并显示unique列表中的信息.为此,我使用angularinbuild filter方法.

但我收到了错误.

这是我的尝试(我过滤了SubProjectName)

<ul>
    <li ng-repeat="project in projectNames | unique: 'SubProjectName' ">
        {project.SubProjectName}}
    </li>
</ul>

现场演示

当客户端点击该行时,我想在表中插入一行额外的行.数据不应该被预取,因为我预计最多有30行,但每行都有相关的数据,这些数据在一次获取中是不合理的.

到目前为止,我的方法是使用ng-repeat来迭代我的集合并渲染表格.当客户端按下该行时,客户端希望有关该行的详细信息在内联显示为按下的行下的额外行.

<tr ng-repeat="court in courts">            
  <td>{{court.name}}</td>
  <td>{{court.number}}</td>
  <td>{{court.nrOfPlayers}}</td>
  <td>
    <a href ng:click="toggle(court.number)">Details</a>  <!-- click toggles extra row with data loaded async -->
  </td>
</tr>
<!-- extra row here -->

我已经成功地以一种黑客的方式展示了桌子底下的细节,但这不是我想要的.

你如何用angular.js实现这一目标？有角度的方法是什么？

这里有一个愚蠢的壁球场示例http://jsfiddle.net/HByEv/

使用此代码:

<ul data-ng-repeat="airport in airports">
            <li>{{airport.code}}</li>
            <li>{{airport.city}}</li>
            <li>{{airport.name}}</li>
</ul>

我最终得到三个 <ul>,每个都有一个 <li>.

我怎样才能得到一个 <ul>与3 <li>里面？

我正在为我的页面使用angularjs.我想过滤JSON对象中的值,因此不存在冗余.但我没有找到任何方法来获得角度ng-repeat的唯一值.反正有吗？

好的,这是关于这个问题的一些描述.我有这种格式的JSON.这是我从服务获得的JSON.所以我们不能指望重复数据是如何发生的.

result = [
        {
            _id: "500004",
            subject: "Complete the task",
            date: "25 Aug, 2013"
        },      
        {
            _id: "500004",
            subject: "Complete the task",
            date: "25 Aug, 2013"
        },      
        {
            _id: "500005",
            subject: "Attend to the event",
            date: "2 Jan, 2013"
        },      
        {
            _id: "500065",
            subject: "Some task deadline",
            date: "20 Sep, 2013"
        },      
        {
            _id: "500004",
            subject: "Complete the task",
            date: "25 Aug, 2013"
        }
]

我希望输出JSON没有重复的元素,所以我的输出将是这样的

result = [
        {
            _id: "500004",
            subject: "Complete the task",
            date: "25 …

我没有得到所选标签项的选项值的id值.

<div ng-controller="UserCreationCtrl">
    <form novalidate="novalidate" class="form-horizontal">
        <div class="control-group">
            <label class="control-label" for="inputFirstName">First name:</label>

            <div class="controls">
                <input type="text" id="inputFirstName" ng-model="doctor.firstName" placeholder="First name"/>
            </div>
        </div>

        <div>
            <span  class="nullable">
                <select ng-model="user.lookupId" ng-options="select as speciality.lookupName for speciality in specialityList" ng-change="selectedSpecilaty()">
                    <option value="">-- choose speciality --</option>
                </select>
            </span>
        </div>
    </form>
</div>

我的控制器

app.controller('UserCreationCtrl', ['$scope', 
    function ($scope) {

    $scope.specialityList = [
                                 {lookupId : 1, lookupName: 'speciality1'},
                                 {lookupId : 2, lookupName: 'speciality2'},

                                 {lookupId : 4, lookupName: 'speciality6'},
                                 {lookupId : 3, lookupName: 'speciality3'}
                                 ];

    $scope.user = {firstName: 'first name …

是否有任何选项从筛选$scope.items,其中ID阵列中的存在$scope.myitems？

ng-repeat="item in items | filter:{item.id == myitems}

演示:http://codepen.io/anon/pen/rOeGYB

angular.module('myapp', [])
  .controller("mycontroller", function($scope) {
    $scope.items = [
      {
        "id": 1,
        "name": "Melodie"
      }, {
        "id": 2,
        "name": "Chastity"
      }, {
        "id": 3,
        "name": "Jescie"
      }, {
        "id": 4,
        "name": "Hamish"
      }, {
        "id": 5,
        "name": "Germaine"
      }, {
        "id": 6,
        "name": "Josephine"
      }, {
        "id": 7,
        "name": "Gail"
      }, {
        "id": 8,
        "name": "Thane"
      }, {
        "id": 9,
        "name": "Adrienne"
      }, …

这是我今天发布的第三个问题,请原谅我,但我只是碰到了我似乎无法弄清楚的事情.

这是我的角度代码:

angular.module('ngApp', [])
.factory('authInterceptor', authInterceptor)
.constant('API', 'http://appsdev.pccportal.com:8080/ecar/api')
.controller('task', taskData)

function taskData($scope, $http, API) {
  $http.get( API + '/tasks' ).
  success(function(data) {
    $scope.mainTask = data;
    console.log(data);
  });
}

还有一些简单的HTML:

    <ul>
      <li class="view1" ng-repeat="task in mainTask.Tasks"> <strong>CAR ID:</strong> {{ task['CAR ID'] }} </li>
      <br>
      <li class="view1" ng-repeat="task in mainTask.Tasks"> <strong>Title:</strong> {{task['Project Title']}} </li>
      <br>
      <li class="view1" ng-repeat="task in mainTask.Tasks"> <strong>Amount:</strong> ${{task.Amount}} </li>
      <br>

      <li class="view1" ng-repeat="task in mainTask.Tasks"> <strong>Status:</strong> {{task.Status}} </li>
    </ul>

这是返回的内容:

但我需要它看起来像这样:

如何拆分ng-repeat并允许我将正在输入的值(如果我说的那样)分开.

谢谢!