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

Posted 2023-05-09

【中文标题】AngularJS：在点击部分，然后将值应用到包含的输入

【英文标题】：AngularJS: On click section then Apply values to contained inputs

【发布时间】：2018-09-07 15:49:05

【问题描述】：

我正在学习 Angular.JS。我也在尝试“放弃 Jquery 的拐杖”，并在“The Angular Way”中实现这一点。

我有 ng-repeat 创建 DOM 元素。有几个 div 部分，其中包含输入项。我希望能够单击部分文本并有角度地将正常值应用于包含的输入元素。我立刻想到了 JQuery：将元素作为参数发送，然后循环子输入并更新它们。我怀疑他是不良 Angular 的一个例子。我应该在数据对象中找到该部分，循环子项并在那里更新值吗？

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")

  
 ])

.ie-section-box 
  border: 1px solid black;


.ie-section-wrapper 
  border: 1px solid red;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-App="examsApp">
 <div id="exams" class="ie-exam" ng-controller="ExamsController as examsList">
        <div id="exam.id" class="ie-exam" ng-repeat="exam in examsList.exams">
            exam.text
            <div id="section.id" ng-click="fillNorms()" class="ie-section-wrapper" ng-repeat="section in exam.sections">
                <span examsection="section.id" class="ie-section-box">section.text
                </span>
                <span class="ie-lines-wrapper">
                    <span class="ie-line" ng-repeat="lines in section.lines">
                        <span class="ie-bullet" ng-repeat="bullet in lines.line">
                            <span class="ie-pretext">bullet.pretext</span>
                            <span class="ie-inputwrapper">
                                <input type="text" ng-model="bullet.value" class="ie-input" />
                            </span>
                        </span>
                    </span>
                </span>
            </div>
        </div>
    </div>
</div>   

【问题讨论】：

我猜大多数人都在努力理解你想要什么......首先你可以做出“糟糕的 Angular”——然后告诉你要改变什么是超级容易的......但看起来你只需要 ng-click="fillNorms(exam)" 然后在控制器中对这个对象做任何你想做的事情。

点击栏目：plnkr.co/edit/biuXL5p91Su3jSthuwW4?p=preview

【参考方案1】：

演示

这里是 plunker：https://plnkr.co/edit/M1jiWiZtTWWGyezmNJMG?p=preview

我希望这是你想要的

说明

首先让我们将要填充的section 传递给fillNorms 函数：

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

现在让我们创建一个 ng-repeats 的 javascript 等效项，以便我们可以在 fillNorms 函数中访问输入值（显然命名为子弹）：

... 
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 函数不会被调用，因为我们正在阻止点击事件传播到父元素

【讨论】：

永远不会在控制器中执行相当于 ng-repeat 的操作。通过有意义。非常感谢。

@cycle4passion 乐于助人 :) 顺便说一句，这是我的第一个 SO 答案：D

【参考方案2】：

参考以下链接： 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 布尔属性，以确定部分是否被点击。

【讨论】：

看起来不错，直到您点击后去编辑，然后无法更改

你有什么要求，能不能说一下

我希望它像当前一样工作，但在单击该部分后仍然能够编辑输入元素。

我根据自己的理解更新了 Plunker。任何偏差请告诉我。 plnkr.co/edit/9FWIZYlbqivLpGdtUXNT?p=preview

无法正常工作。当前版本在输入中的任何按键上都会正常填充。也可以根据需要单击部分填充，但不能手动编辑输入。