从带有输入框列表的Angular自定义指令中获取组合字符串

Get a combined string from an Angular custom directive with a list of input boxes

本文关键字：指令 自定义 获取 字符串 组合 Angular 输入 列表      更新时间：2023-09-26

我是Angular的新手。享受当前学习新事物的乐趣。

这是我的意图——我想要一个输入框的列表。然后我想从用户输入中获得组合字符串值。输入框的计数是从自定义指令的父控制器传递的。在得到组合值之后，我还需要将其传递回其父作用域。

这就是我目前所处的位置。

angular.module('starter.directives', [])
  .directive('userInput', function($compile) {
    return {
      //      templateUrl: 'templates/user-input-singlebox.html',
      template: '<div></div>',
      restrict: 'E',
      scope: {
        records: '='
      },
      //controller needs to serve as API
      controller: function($scope) {
      },
      link: function($scope, $element, $attrs) {
        $scope.inputCount = $scope.$parent.userInputStaticCount;
        var records = [];
        $scope.getInputBoxNum = function() {
          return new Array($scope.inputCount);
        };

        $scope.userInputBoxRecordList = "hello";
        $scope.getUserInput = function() {
          //return a combined string of value from input box index 0 to input box index n-1;
        }
        var html = '<div ng-repeat="i in getInputBoxNum() track by $index"><input id="{{$index+1}}" type="text" ng-model="userInputBoxRecordList" name="box"' + 'style="background-color:beige; border:1px solid black;"></div>';
        var e = $compile(html)($scope);
        $element.replaceWith(e);
      }
    }
  });
  1. 然而，我为每个输入框分配了一个唯一的id，我想知道是否有更好的方法，比如使用ng模型来让userInput（）函数工作
  2. 我想动态生成一个用户输入框列表。目前我把所有的代码都放在链接后的功能中。我相信我可以在模板中写一个输入框，然后生成一个框列表。然而，我自己并没有弄清楚。有什么提示吗

您可以使用对象数组而不是项数组。然后，在每个对象上，您可以使用ng模型绑定文本属性，从而拥有文本属性来跟踪输入字段的值。而不是使用一个函数来遍历数组并插入要收集的文本。希望这对你有效

// js
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
  $scope.combinedString = '';
  $scope.InpustStaticCount =5 ;
  $scope.getCombinedString = function(){
    $scope.items.forEach(function(el){
          $scope.combinedString += el.text + ", ";
          console.log($scope.combinedString);
    });
  }
});

app.directive('userInput', function($compile) {
    return {
      templateUrl: 'dir.html',
      restrict: 'E',
      scope:false, 
      //controller needs to serve as API
      controller: function($scope) {

      },
      link: function($scope, $element, $attrs) {
        $scope.items = [];
        for(var i = 0; i < $scope.InpustStaticCount; i ++ ){
          $scope.items.push({text: ''});        }

      }
    }
  });
// main html 
  <body ng-controller="MainCtrl">
    <p>Enter data in input boxes then press button</p>
    <user-input></user-input>
    <button class="btn btn-info" ng-click="getCombinedString()">Get Combined String</button>
    <div class="panel panel-info">
      <div class="panel-heading">Combined String</div>
      <div class="panel-body">{{combinedString}}</div>
    </div>
  </body>
//directive html 
<div ng-repeat = "item in items track by $index">
  <input id="{{$index+1}}" type="text" ng-model='item.text' > {{$index}} {{item.text}}
</div>

这是一个使用隔离作用域而不是共享的指令

 app.directive('userInputIsolate', function($compile) {
    return {
      templateUrl: 'dir.html',
      restrict: 'E',
      scope:{
        inpuststaticount : "=",
        items: '='
      }, 
      //controller needs to serve as API
      controller: function($scope) {

      },
      link: function($scope, $element, $attrs) {
        console.log($scope.inpuststaticount)
        for(var i = 0; i < $scope.inpuststaticount; i ++ ){
          $scope.items.push({text: ''});        }

      }
    }
  });
   app.controller('MainCtrl', function($scope) {

  $scope.secondcombinedString = '';
  $scope.InpustStaticCount =5 ;
   $scope.secondItems = [];
    $scope.getCombinedStringIsolate = function(){
    $scope.secondItems.forEach(function(el){
          $scope.secondcombinedString += el.text + ", ";
          console.log($scope.combinedString);
    });
  }
});
// main html
 <user-input-isolate inpuststaticount= 'InpustStaticCount' items = 'secondItems'  ></user-input-isolate>

砰：http://plnkr.co/edit/RrhZXbHyoGQ4cb1WirZS?p=preview

相关文章：