演示

Question

我正在学习Angular.JS。我也试图放弃Jquery＆＃34;的拐杖，并在＆＃34; The Angular Way＆＃34;中实现这一点。

我有重复创建DOM元素。有几个div部分，其中包含输入项。我希望能够单击部分文本并将常量值应用于包含的输入元素。我的想法立即转到JQuery：将元素作为参数发送，然后循环子输入并更新它们。我怀疑他是坏角色的一个例子。我应该找到数据对象中的部分，循环子节点并更新值吗？

＆＃13;

use strict;
use warnings;
use Net::SSLeay;

# create a new BIO
my $cert_file = '/path/to/AppleIncRootCertificate.pem';
my $bio = Net::SSLeay::BIO_new_file($cert_file, 'r');

# make an x509 struct
my $x509 = Net::SSLeay::PEM_read_bio_X509($bio) || die "read_bio failed";
# returns: value corresponding to openssl's X509 structure (0 on failure)

my $store = Net::SSLeay::X509_STORE_CTX_new();

# segfaults here   \/ \/ \/ 
my $add_rv = Net::SSLeay::X509_STORE_add_cert($store, $x509);
# $store - value corresponding to openssl's X509_STORE structure
# $x509 - value corresponding to openssl's X509 structure

# next step?
# my $verify_rv = Net::SSLeay::X509_verify_cert(...?);

＆＃13;

var data = [
    {
        "id": "exam1",
        "text": "exam1",
        "sections": [
            {
                "id": "section1",
                "text": "section1",
                "lines": [
                    {
                        "line": [
                            {
                                "pretext": "preone:",
                                "normal": "normal for one",
                            },
                            {

                                "pretext": "pretwo:",
                                "normal": "normal for two",
                            }
                        ]
                    }
                ]
            },
            {
                "id": "section2",
                "text": "section2",
                "lines": [
                    {
                        "line": [
                            {
                                "pretext": "prethree:",
                                "normal": "normal for three"
                            },
                            {
                                "pretext": "prefour:",
                                "normal": "normal for four"
                            }
                        ]
                    }
                ]
            }

        ]
    }
]
  
angular.module('examsApp', [])

.controller('ExamsController', ['$scope', function ($scope) {
        var examsList = this;
        examsList.exams = data;
  
  $scope.fillNorms = function() {
    // loop inputs in section?
     // bullet.value = bullet.normal?
     alert("fill bullet.normal")
}
  
 }])

＆＃13;

.ie-section-box {
  border: 1px solid black;
}

.ie-section-wrapper {
  border: 1px solid red;
}

＆＃13;

Answer 1

参考以下链接： https://plnkr.co/edit/9FWIZYlbqivLpGdtUXNT?p=preview

以下是更改：

<div id="{{section.id}}" ng-click="section.isClick=true"...>
   ...
   <input type="text" ng-model="(section.isClick) ? bullet.normal: ''" ... />
   ...
</div>

这里，我为每个部分使用isClick布尔属性，以确定单击部分。

Answer 2

演示

以上是这个问题：https://plnkr.co/edit/M1jiWiZtTWWGyezmNJMG?p=preview

我希望这是你想要的

释

首先让我们将section传递给fillNorms函数：

<div id="{{section.id}}" ng-click="fillNorms(section)" ... >

现在让我们制作相当于ng-repeat的javascript，以便我们可以在fillNorms函数中访问输入值（显然名为bullet）：

... 
ng-repeat="lines in section.lines"
    ...
    ng-repeat="bullet in lines.line"
    ...
...

变为

angular.forEach(section.lines, function(lines){
    angular.forEach(lines.line, function(bullet){
        ...
    })
})

最后，让我们更改ng-model为bullet.value

的输入值

bullet.value = bullet.normal

最终fillNorms函数现在看起来像这样：

$scope.fillNorms = function(section) {
    angular.forEach(section.lines, function(lines){
        angular.forEach(lines.line, function(bullet){
            bullet.value = bullet.normal;
        })
    })
}

唯一不需要的是，当用input点击用户输入其他值时，section的点击事件也会被触发（因为输入是孩子的部分）为了克服这个问题，我们将使用event.stopPropagation()方法

<input ng-click="$event.stopPropagation()" ...>

现在，当单击输入时，fillNorms函数未被调用，因为我们正在停止click事件传播到父元素

AngularJS：在点击部分然后将值应用于包含的输入

2 个答案:

演示

释