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

早上好，我是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>

我曾尝试使用$filter，但我一直无法将值传递给作用域

---

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

这不是过滤器的经典用例：在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] }
        }
    })
}

---

这不是过滤器的经典用例：在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] }
        }
    })
}

HTML

HTML

---

在您的HTML中，我已将user.idx替换为名称，因为您正在按名称搜索。Plunker上的示例：

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

 } 

});

var-app=angular.module（'app'，[]）
.controller（'appCtrl'，function（）{
$scope.data1=[{
id:1，
姓名：“abc”
}, 
{
id:2，
名称：“efg”
}];
$scope.data2=[{
id:1，
信息：“这里是abc”
}, 
{
id:2，
信息：“绝对不是abc”
}];
$scope.name=“”；
$scope.user={
id:“”，
姓名：“，
信息：“
};
函数findIdByName（名称）{
对于（变量i=0；i<$scope.data1；i++）{
if（$scope.data1[i].name==name）
返回$scope.data1[i].id；
}
return-111；//假设它是一个不可能的ID
}
函数findInfoById（id）{
对于（变量i=0；i<$scope.data2；i++）{
if（$scope.data1[i].id==id）
返回$scope.data1[i].info；
}
return-111；//假设这是不可能的信息
}
$scope.passTheValue=function（）{
var id=findIdByName（$scope.name）；
如果（id！=-111）{
var info=findInfoById（id）；
如果（信息！=-111）{
$scope.user.id=id；
$scope.user.name=$scope.name；
$scope.info=info；
}否则{
log（id，“id不存在于$scope.data2中”）
}
}否则{
log（名称，“名称在$scope.data1中不存在”）
}
} 
});

在您的HTML中，我已将user.idx替换为名称，因为您正在按名称搜索。Plunker上的示例：

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

 } 

});

var-app=angular.module（'app'，[]）
.controller（'appCtrl'，function（）{
$scope.data1=[{
id:1，
姓名：“abc”
}, 
{
id:2，
名称：“efg”
}];
$scope.data2=[{
id:1，
信息：“这里是abc”
}, 
{
id:2，
信息：“绝对不是abc”
}];
$scope.name=“”；
$scope.user={
id:“”，
姓名：“，
信息：“
};
函数findIdByName（名称）{
对于（变量i=0；i<$scope.data1；i++）{
if（$scope.data1[i].name==name）
返回$scope.data1[i].id；
}
return-111；//假设它是一个不可能的ID
}
函数findInfoById（id）{
对于（变量i=0；i<$scope.data2；i++）{
if（$scope.data1[i].id==id）
返回$scope.data1[i].info；
}
return-111；//假设这是不可能的信息
}
$scope.passTheValue=function（）{
var id=findIdByName（$scope.name）；
如果（id！=-111）{
var info=findInfoById（id）；
如果（信息！=-111）{
$scope.user.id=id；
$scope.user.name=$scope.name；
$scope.info=info；
}否则{
log（id，“id不存在于$scope.data2中”）
}
}否则{
log（名称，“名称在$scope.data1中不存在”）
}
} 
});

您希望它是动态的吗？我的意思是，在您键入或单击按钮或离开焦点后显示结果？我希望它在离开焦点后显示结果。您希望它是动态的吗，在键入或单击某个按钮或离开焦点后显示结果？我希望它在离开焦点后显示结果这与OP要求的不完全一样。但是有一个问题，$scope.user在输入错误时没有返回为空。我试着把$scope.user={id:''，name:''，info:''}放在其他地方，但什么也没发生。糟糕的是，我太累了，没意识到我在迭代中添加了null。我很抱歉。难怪什么也没发生。这并不完全是OP所问的。但是有一个问题，$scope.user在输入错误时没有返回空。我试着把$scope.user={id:''，name:''，info:''}放在其他地方，但什么也没发生。糟糕的是，我太累了，没意识到我在迭代中添加了null。我很抱歉。难怪什么也没发生。

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

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

 } 

});