如何使用角度从指令输入字段中获取值答案

【问题标题】：How to get value from a directive input field using angular如何使用角度从指令输入字段中获取值
【发布时间】：2017-05-24 15:48:23
【问题描述】：

我是 angular.js 的新手。我的 main.js 文件中有两个指令，每个指令在模板中都有一个输入文本字段。有一个 Html 页面 (index.html)，我想将这些指令的文本字段与另一个输入文本字段一起使用，该输入文本字段是一个 Html 输入文本字段。

现在我希望用户在指令的文本字段中给出的任何输入都应该计算字符数，并且应该在第三个文本字段中打印总和，这是一个 Html 文本字段。

代码如下：-

Main.js 文件代码：

/// <reference path="angular.min.js" />    

var app = angular.module("myApp", []);

app.directive("textbox1", function() {
  return {
    restrict: 'E',
    scope: {
      timezone : "@"
    },
    template: "<div> <input type='text' style='background-color:orange; height=21px; width:151px;' ng-model='txtval1' ng-change='updateval()' />{{txtval1.length}} </div>"
  }
});

app.directive("textbox2", function() {
  return {
    restrict: 'E',
    scope: {
      timezone: "@"
    },
    template: "<div> <input type='text' style='background-color:orange; height=21px; width:151px;' ng-model='txtval2' ng-change='updateval()'/>{{txtval2.length}} </div>"
  }
});

app.controller("myCtrl", function ($scope) {
  $scope.updateval = function () {
    console.log($scope.txtval1.value);
    $scope.txtThird = ($scope.txtval1.length) + ($scope.txtval2.length);
  }
});

HTML 页面代码：

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <meta charset="utf-8" />
</head>
<body>

<div ng-app="myApp">
  <textbox1></textbox1>
  <textbox2></textbox2>
  <br/><br/>
  <input type="text" ng-model="txtThird"/>
</div>    

<script src="scripts/angular.min.js"></script>
<script src="scripts/main.js"></script>

</body>
</html>

【问题讨论】：

标签： angularjs

【解决方案1】：

你需要做这样的事情：

var app = angular.module("myApp", []);

app.directive("textbox1", function() {
  return {
    restrict: 'E',
    scope: {
      timezone : "@",
      updateval: "&updateval"
    },
    template: "<div> <input type='text' style='background-color:orange; height=21px; width:151px;' ng-model='txtval1' ng-change=\"updateval({inputNr:'1', textval: txtval1})\" />{{txtval1.length}} </div>",
  }
});

app.directive("textbox2", function() {
  return {
    restrict: 'E',
    scope: {
      timezone: "@",
      updateval: "&updateval"
    },
    template: "<div> <input type='text' style='background-color:orange; height=21px; width:151px;' ng-model='txtval2' ng-change=\"updateval({inputNr:'2', textval: txtval2})\" />{{txtval2.length}} </div>"
  }
});

app.controller("myCtrl", function ($scope) {
  $scope.inputValues = [
    {
      input: '1',
      value: ''
    },
    {
      input: '2',
      value: ''
    }
  ];
  $scope.updateval = function (inputNr, txtval) {
    var updatedInput = _.find($scope.inputValues, {input: inputNr});
    updatedInput.value = txtval;
    var lengthSum = 0;
    angular.forEach($scope.inputValues, function(inputObj){
      lengthSum += inputObj.value.length;
    });
    console.log(lengthSum);
  }
});

这里正在运行：https://codepen.io/neptune01/pen/bWzLvq

请注意，我使用的是 lodash。

【讨论】：

【解决方案2】：

如果我知道你需要这样的东西：

//index.html

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <meta charset="utf-8" />
</head>
<body ng-app="myApp">

<div ng-controller="myCtrl">
  <textbox length="length1"></textbox>
  <textbox length="length2"></textbox>
  <br/><br/>
  <input type="text" ng-model="txtThird"/>
  <p>Sum = {{length1+length2}}</p>
</div>   

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

</body>
</html>

//script.js

'use strict';
var app = angular.module("myApp", []);

app.directive("textbox", function() {
  return {
    restrict: 'E',
    scope: {
      length: '='
    },
    controller: function($scope){

    },
    template: "<div> <input type='text' style='background-color:orange; height=21px; width:151px;' ng-model='txtval' ng-change='length = txtval.length'/>{{txtval.length}} </div>"
  }
});

app.controller("myCtrl", function ($scope) {
  $scope.txtThird = "some text";
  $scope.length1 = 0;
  $scope.length2 = 0;
  $scope.updateval = function () {
    console.log($scope.txtval1.value);
    $scope.txtThird = ($scope.txtval1.length) + ($scope.txtval2.length);
  }

您可以在 plunker 上试用：https://plnkr.co/edit/XE6OcQX5GOJIPMcVHWum?p=preview

【讨论】：

嗨，塞尔加罗斯。感谢您的解决方案，但我希望总和应该在第三个文本字段内，其中 ng-model 为“txtThird”而不是在此文本字段之外。
更改 html 中的输入字段：