AngularJS将过滤后的值传递给范围值

Question

早上好，我是angularjs的新手，想要更多地练习它，在这里我有一个关于一个简单案例的问题，同时试图学习构建我自己的angularjs网页。

我有这两组数据

$scope.data1 = [{ id: 1, name: "abc" },
                { id: 2, name: "efg" }]
$scope.data2 = [{ id: 1, info: "this is abc" },
                { id: 2, info: "absolutely not abc"}]
$scope.user = {
                id: "",
                name: "",
                info: ""
              }

我有这个输入

<input ng-blur="passTheValue()" ng-model="user.idx" ng-type="text" placeholder="write name here"></input>

我可以在文本框中写下姓名。

我的问题是，如何根据我输入的输入将data1和data2中的所有值传递给$ scope.user？ 例如，我在文本框上写“abc”，然后我的$ scope.user将包含

id: 1, name: "abc", info: "this is abc"

我试图使用$ filter，但我坚持将值传递给范围。

对不起我的英语，这不是我的主要语言。

Answer 1

这不是过滤器的经典用例：在passTheValue（）函数中处理数据。

this.passTheValue = function(){
    $scope.data1.forEach(function(value, index, array){
        if(value.name == $scope.idx){
            $scope.user = {id: value.id, name: value.name, info: $scope.data2[index] }
        }
    })
}

Answer 2

HTML

<input ng-blur="passTheValue(user.idx)" ng-model="user.idx" ng-type="text" placeholder="write name here"></input>

角

$scope.passTheValue = function(name) {
    angular.forEach($scope.data1, function(value, key){
       if(value.name == name){

          $scope.user.id = value.id;
          $scope.user.name= value.name;
          $scope.user.info = $scope.data2.filter(function(v) {
             return v.id === value.id; // Filter out the appropriate one
          })[0].info;

          console.log($scope.user.id);
          console.log($scope.user.name);
          console.log($scope.user.info);
      }
   });
 }

Answer 3

在您的HTML中，我已经按名称替换了user.idx，因为您正在按名称搜索。 关于Plunker的示例： https ：//plnkr.co/edit/bumDWC713dVWGnKoO5G3 ？ p = preview

   <body ng-app='app'>
     <div ng-controller='appCtrl'>
        <input ng-blur="passTheValue()" ng-model="name" ng-type="text" placeholder="write name here">
     </div> 
   </body>

在您的JavaScript中，我添加到简单的搜索方法。

var app = angular.module('app',[])
.controller('appCtrl',function(){
$scope.data1 = [{ 
                  id: 1,
                  name: "abc"
                }, 
                {
                  id: 2,
                  name: "efg"
                }];

$scope.data2 = [{
                  id: 1,
                  info: "this is abc"
                 }, 
                 {
                  id: 2,
                  info: "absolutely not abc"
                 }];

$scope.name = "";
$scope.user = {
               id: "",
               name: "",
               info: ""
              };


function findIdByName(name) {
    for (var i = 0 ; i< $scope.data1 ; i++) {
      if($scope.data1[i].name == name)
        return $scope.data1[i].id;
    }
    return -111 ;  //Assume that it's an impossible ID
 }

function findInfoById(id) {
   for (var i = 0 ; i< $scope.data2 ; i++) {
     if($scope.data1[i].id == id)
        return $scope.data1[i].info;
   }
   return -111 ;  //Assume that it's an impossible Info
}

$scope.passTheValue = function(){
var id = findIdByName($scope.name);

  if(id != -111){
     var info = findInfoById(id);
     if(info != -111){
       $scope.user.id= id;
       $scope.user.name = $scope.name;
       $scope.info = info;
       }else {
         console.log(id,"Id doesn't exist in $scope.data2")
        }
  }else {
    console.log(name,"name doesn't exist in $scope.data1")
  }

 } 

});

AngularJS将过滤后的值传递给范围值

问题描述

3 个解决方案

解决方案1
0 已采纳 2016-06-30 06:13:11

解决方案2
0 2016-06-30 06:59:35

解决方案3
0 2016-06-30 07:31:53

AngularJS将过滤后的值传递给范围值

问题描述

3 个解决方案

解决方案1 0 已采纳 2016-06-30 06:13:11

解决方案2 0 2016-06-30 06:59:35

解决方案3 0 2016-06-30 07:31:53

解决方案1
0 已采纳 2016-06-30 06:13:11

解决方案2
0 2016-06-30 06:59:35

解决方案3
0 2016-06-30 07:31:53