简体   繁体   中英

Trying to update one input's value to another's using angularjs

I'm fairly new using AngularJS but I've been using for a pet project and I've run in to an issue. What I basically want to do is take the text input from this input field:

<form id="ci_search_form">
    <p class="input-append"><label>Search:</label> <input type="text" id="query" ng:model="query" autofocus> <button ng:click="clearSearch()" class="btn"><i class="icon-remove"></i></button></p>
</form>

and update this input field's value with that value:

<div><input type="text" id="ciquery" ng:model="ciquery.Name"></div>

The second input filters some data and I can type in that directly and it works. However this page will have different sets of data, each with their own search input that I want updated by the master input at the top. I can't set value="" or use jQuery to set the value either, it just appears blank unless I explicitly type in that second input field. Can anyone assist with a solution?

EDIT

I thought I should include my app and controller code:

var App = angular.module('TicketAssistApp', []);

App.controller('SearchController', function($scope, $http, $filter){
    $scope.query = '';

    $http.get('static/ci_list.json').success(function(data){
        $scope.ci_list = data;
    });

    $scope.clearSearch = function(){
        $scope.query = '';
    }
});

EDIT 2

Made some progress. Created a function that can be called an update ciquery in $scope:

var App = angular.module('TicketAssistApp', []);

App.controller('SearchController', function($scope, $http, $filter){
    $scope.query = '';
    $scope.ciquery = '';

    $http.get('static/ci_list.json').success(function(data){
        $scope.ci_list = data;
    });

    $scope.queryUpdate = function(){
        $scope.ciquery = $scope.query;
    }

    $scope.clearSearch = function(){
        $scope.query = '';
        $scope.queryUpdate();
    }
});

This works great. However, this creates another issue. Before in ciquery I was using ciquery.Name to filter only on the Name attribute. With this new solution I had to change it to this:

<div><input type="hidden" id="ciquery" ng:model="ciquery"></div>

This searches all fields in my data which returns unwanted results. Suggestions?

$scope and ng-model are differents. You should give ng-model's property to ng-click's function. Looks at this -> Ng-model does not update controller value

To update second input's field (here an example -> http://jsfiddle.net/yEvSL/1/ )

<div><input type="text" id="ciquery" ng:model="query"></div>

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM