有是一些简单..但我是新来的角 [英] Has to be something simple.. but I am new to Angular

问题描述

这是我穿过...

来的问题

我返回一个HTTP在重复显示一些数据。

  $ scope.search =功能（）{
    $ http.get（attemptsJSON.php？Q =+ $ scope.svalue）
            .success（功能（响应）{
            $ scope.attempts =响应;            }）;
        }
 

这数据我有一个点击函数返回更多的数据。但是，数据上有这样一个链接到它的previous数据确定的。

  $ scope.getAllAtt =函数（）{
    $ http.get（allAttemptsJSON.php？一个=+α）
            .success（功能（响应）{
        $ scope.allAttempts =响应;
            }）;
        }
 

问题是，返回的数据显示在我的intial重复的每一个实例，我只希望它显示下面被点击的人。我看了看，如模板缓存这么多不同的可能性，但我不知道如何去这个我有点新的角度，我想我需要使用一条指令，但指令让我困惑。请帮助。

下面是HTML

 ＆LT; TR NG重复启动=企图ATT＆GT;
            ＆LT; TD类=扩大-COLNG点击=getAllAtt（att.action_id）＆GT;＆LT; I类=发发加圈＆GT;＆LT; / I＆GT;＆LT; / TD＆GT;
            ＆所述; TD＆GT; {{att.cust_no}}＆下; / TD＆GT;
            ＆所述; TD＆GT; {{att.emp_name}}＆下; / TD＆GT;
            ＆所述; TD＆GT; {{att.attemptdt}}＆下; / TD＆GT;
            ＆所述; TD＆GT; {{att.note}}＆下; / TD＆GT;
            ＆所述; TD＆GT; {{att.callstatus}}＆下; / TD＆GT;
        ＆LT; / TR＆GT;        ＆LT; TR NG重复的高端NG重复=，在allAttempts X＆GT;
            ＆LT; TD＆GT;＆LT; / TD＆GT;
            ＆LT; TD＆GT;＆LT; / TD＆GT;
            ＆LT; TD＆GT;＆LT; / TD＆GT;
            ＆LT; TD＆GT;＆LT; / TD＆GT;
            ＆所述; TD＆GT; {{x.note}}＆下; / TD＆GT;
            ＆LT; TD＆GT;＆LT; / TD＆GT;
        ＆LT; / TR＆GT;'
 

解决方案

如果你想要一套价值仅属于一个项的重复项目，那么你应该分配这些你重复的项目，而不是整个范围

 ＆LT; TR NG重复启动=企图ATT＆GT;
    ＆LT; TD类=扩大-COLNG点击=getAllAtt（ATT）＆GT;
      ＆LT; I类=发发加圈＆GT;＆LT; / I＆GT;＆LT; / TD＆GT;
    ＆所述; TD＆GT; {{att.cust_no}}＆下; / TD＆GT;
    ＆所述; TD＆GT; {{att.emp_name}}＆下; / TD＆GT;
    ＆所述; TD＆GT; {{att.attemptdt}}＆下; / TD＆GT;
    ＆所述; TD＆GT; {{att.note}}＆下; / TD＆GT;
    ＆所述; TD＆GT; {{att.callstatus}}＆下; / TD＆GT;
＆LT; / TR＆GT;
＆LT; TR NG重复的高端NG重复=，在att.allAttempts X＆GT;
    ＆LT; TD＆GT;＆LT; / TD＆GT;
    ＆LT; TD＆GT;＆LT; / TD＆GT;
    ＆LT; TD＆GT;＆LT; / TD＆GT;
    ＆LT; TD＆GT;＆LT; / TD＆GT;
    ＆所述; TD＆GT; {{x.note}}＆下; / TD＆GT;
    ＆LT; TD＆GT;＆LT; / TD＆GT;
＆LT; / TR＆GT;
 

  $ scope.getAllAtt =功能（未遂）{
    $ http.get（allAttemptsJSON.php？A =+ attempt.action_id）
    .success（功能（响应）{
        attempt.allAttempts =响应;
    }）;
};
 

这包括一些简化，因为我没有访问到你的HTTP源或CSS，但它证明了这一概念：

http://jsfiddle.net/femt86u9/

This is the problem that I'm coming across...

I am returning an http to display some data in a repeat..

$scope.search = function() {    
    $http.get("attemptsJSON.php?q="+$scope.svalue)
            .success(function(response) {   
            $scope.attempts = response;

            });
        }'

That data I have a click function to return even more data. But that data is determined on the previous data which has a link to it like this.

$scope.getAllAtt = function(a) {
    $http.get("allAttemptsJSON.php?a="+a)
            .success(function(response) {   
        $scope.allAttempts=response;
            });
        }

the problem is that returned data is showing on every instance of my intial repeat and I only want it to show below the one that is clicked. I looked at so many different possibilities like Template caching, but I have no idea how to go about this I am somewhat new to Angular and I think I need to use a directive but directives confuse me. Please help.

Here is the HTML

        <tr ng-repeat-start="att in attempts">
            <td class="expand-col"  ng-click="getAllAtt(att.action_id)"><i class="fa fa-plus-circle"></i></td>          
            <td>{{att.cust_no}}</td>
            <td>{{att.emp_name}}</td>
            <td>{{att.attemptdt}}</td>
            <td>{{att.note}}</td>
            <td>{{att.callstatus}}</td>
        </tr>

        <tr ng-repeat-end ng-repeat="x in allAttempts">
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td>{{x.note}}</td>
            <td></td>
        </tr>'

解决方案

If you want a set of values that only belong to one item in your repeating items, then you should assign those to your repeating item, not to the whole scope:

<tr ng-repeat-start="att in attempts">
    <td class="expand-col"  ng-click="getAllAtt(att)">
      <i class="fa fa-plus-circle"></i></td>          
    <td>{{att.cust_no}}</td>
    <td>{{att.emp_name}}</td>
    <td>{{att.attemptdt}}</td>
    <td>{{att.note}}</td>
    <td>{{att.callstatus}}</td>
</tr>
<tr ng-repeat-end ng-repeat="x in att.allAttempts">
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td>{{x.note}}</td>
    <td></td>
</tr>

$scope.getAllAtt = function(attempt) {
    $http.get("allAttemptsJSON.php?a=" + attempt.action_id)
    .success(function (response) {   
        attempt.allAttempts = response;
    });
};

This includes some simplifications since I don't have access to your HTTP sources or CSS, but it demonstrates the concept:

http://jsfiddle.net/femt86u9/

这篇关于有是一些简单..但我是新来的角的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！