AngularJSはフィルタリングされた値をスコープの値に換算します

おはようございます、私は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: "" 
       }

これら2組を持っていると私は、テキストボックスに名前を書くことができ、この入力

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

が含まれています私は$フィルタを使用することを試みたが、私はスコープに値を渡すにこだわっています。

私の英語はすみません、私の主な言語ではありません。

出典

2016-06-30 rizal

あなたが入力している間、またはボタンをクリックしたり、フォーカスを離したりしている間に結果を表示したいのですか？ – 01axel01christian

私はそれがフォーカスを残した後に結果を表示したい – rizal

これは、フィルタの古典的な用途ではありません。passTheValue（）関数でデータの処理を行います。あなたのHTMLで

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

出典

2016-06-30 06:13:11 octameter

これは正確にOPが尋ねたものではありません。ありがとう。 – Slan

それはまったくヒットしました。 – rizal

しかし、問題がありますが、入力が間違っていると、$ scope.userは空に戻りませんでした。私はelse $ scope.user = {id： ''、name： ''、info： ''}を入れようとしましたが、何も起こりませんでした。 – rizal

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

出典

2016-06-30 06:59:35 Slan

名前で検索しているので、私は名前でuser.idxを交換しました。 Plunker上のサンプル：あなたのJavaScriptで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>

、私は単純な方法を検索し追加します。

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

} 

});

出典

2016-06-30 07:31:53 01axel01christian

AngularJSはフィルタリングされた値をスコープの値に換算します

答えて

関連する問題