标签: angularjs-ng-change

我想将输入绑定到页面的其他部分,并将用户输入的所有空格替换为其他一些字符,例如星号.

我的(简化)HTML代码如下所示:

<div ng-app>
    <div ng-controller="MyCtrl">
        Output: "{{input}}"<br />
        <input type="text" ng-model="rawInput" ng-change="onInputChanged()" />
    </div>
</div>

相关的控制器也非常简单:

var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
    $scope.input = '';
    $scope.rawInput = '';
    $scope.onInputChanged = function() {
        $scope.input= $scope.rawInput .replace(/\s/g, '*');
    };
};

结果不如预期.进入'Hello '文本框时,结果输出"Hello"将删除尾随空格.对于输入结尾处的多个空格也是如此.

在输入中添加非空格字符时,'Hello W'正确地替换和显示空格:"Hello*World".

所以这是我的问题:如何绑定文本框的值,保留用户输入的所有空格？

我创建了JSFiddle来演示这个问题.

所以我有一些数据以逗号分隔的字符串.

sizes: "Small,Medium,Large,X Large,XX Large"

我得到一个下拉列表,根据拆分该字符串显示值.

<select ng-options="choice as choice for (idx, choice) in val.sizes.split(',')" 
        ng-change="selected.product.set.size(choice);>

        <option value="">Please select a size</option>
</select>

使用ng-change:如何将所选值choice传递给函数？

我遇到了一些奇怪的事情,这个例子在codepen中有效但在我的Ionic应用程序中不起作用.

当我更改select标签中的选项时,我想显示所选的值,但它不起作用,它表明undefined,我已经尝试了很多方面.

这不是原始代码,原始代码从外部API检索值并使用ngOptions填充选项(有效,填充正常).但它不会更新控制器中的值.

所以我决定让它变得更简单,它仍然无法工作:

HTML

<select ng-model="optionSelected" ng-change="selectUpdated()">
    <option value="">Select an option</option>
    <option value="h">Hello</option>
    <option value="b">Bye</option>
</select>

JAVASCRIPT

$scope.selectUpdated = function() {
    console.log('Updated');
    console.log($scope.optionSelected);
};

我认为不需要更多代码,HTML包含在ion-view和中ion-content.没有显示错误,只显示'更新'输出和undefined.

更改选项时,我明白了undefined.但是在codepen中这个相同的代码工作得很好.. http://codepen.io/anon/pen/YXvYmq

有人能告诉我触发这种奇怪行为会发生什么吗？

提前致谢.

我想像这样创建一个html输出:

 <select>
      <option value="" class="">-- Choose category --</option>
      <optgroup label="Dogs">
           <option value="0">Great Dane</option>
           <option value="1">Lab</option>
      </optgroup>
      <optgroup label="Cats">
           <option value="2">Black</option>
           <option value="3">Tabby</option>
      </optgroup>
 </select>

从这样的数组:

 var animals = [{
     name: 'Dogs',
     subcats: ['great dane', 'lab']
 }, {
     name: 'Cats',
     subcats: ['tabby', 'black']
 }, ];

并将模型绑定到设置2个值,animal.type(dog或cat)和animal.subcategory.

尝试了一堆东西......我想我需要使用ng-repeat并通过它来破解...任何帮助都是很有用的.

我在我的页面中使用AngularJS和AngularJS引导程序.我有一个日期选择器指令,如下所示:

    <div class="form-group {{dateStatus.class}}">
        <p class="input-group">
            <input type="text" id="inpDate" class="form-control" 
                   datepicker-popup="dd-MMMM-yyyy" ng-model="task.date" 
                   is-open="datePickerStatus.isOpen" min-date="minDate" 
                   datepicker-options="dateOptions" ng-required="true" 
                   close-text="Close" placeholder="Due date" 
                   ng-change="checkDateValidity()"
            />
            <span class="input-group-btn">
                <button type="button" class="btn btn-default" 
                        ng-click="openDatePicker($event)"
                >
                    <i class="glyphicon glyphicon-calendar"></i>
                </button>
            </span>
        </p>
    </div>

要验证日期输入,在我的控制器中我有以下功能:

        $scope.checkDateValidity = function(){
        var date,
            isValid,
            taskDate;
        taskDate = $scope.task.date;
        date = new Date(taskDate);
        isValid = !isNaN(date);
        if(isValid) {
            $scope.addButtonState.isOk = true;
            $scope.dateStatus.class = '';
        }
        else{
            $scope.addButtonState.isOk = false;
            $scope.dateStatus.class = 'has-error';
        }
    }

一切正常,检查插入的日期是否有效,但问题是,当日期输入留空(或从有效状态更改为空白)我希望它也可以接受,但由于空输入和无效日期是undefined我不知道该怎么情况之间申报.

我还想过直接读取输入文本:

document.getElementById('inpDate').value

但是当值改变时触发了ng-change,而我留下了之前没用的前一个值...... …

我的模板中有这样的东西:

<input name="searchText" placeholder="Search" data-type="search" 
       ng-model="searchText" 
       ng-change="searchRecords()" 
       ng-keyup="onKeyUp()">

当我到达该模板时,searchRecords()调用函数(触发ng-change).我想searchRecords()只在我开始输入时被调用(更改searchText将触发ng-change).现在它被控制器初始化触发了.

我试图设置searchText到null,''在控制器,但它是一样的.

这种行为是设计还是我遗漏了什么？

编辑:

我意识到这段代码触发了我searchRecords():

$scope.$watchGroup(['daysBefore', 'daysAhead'], function (newValues, oldValues, scope) { ... }

编辑:

我删除了ng-change并添加了这个:

$scope.$watch('searchText', function (newValue, oldValue) {
                $scope.searchRecords();
            });

在没有任何改变的情况下,$scope.searchText该代码在控制器初始化时执行.

我有一个控制器获取用户列表和列出它们的视图,以及一个用于显示和设置它们是否处于活动状态的复选框...

.controller('StaffCtrl', ['StaffService', function(StaffService) {
  var self = this;
  self.staff = StaffService.query();
  self.activeUpdate = function(person){
    StaffService.update({id:person.id}, person);
  };
}]);

<tr ng-repeat="person in staffCtrl.staff">
  <td>{{ person.name_full }} </td>
  <td><input type="checkbox" ng-checked="person.active" ng-model="person.active" ng-change="staffCtrl.activeUpdate(person)" ng-true-value="1" ng-false-value="0"></td>
</tr>

单击该复选框一旦触发activeUpdate,就会进行异步调用并更新用户,但在视图中复选标记本身不会从复选框中消失(在最新的Chrome和Firefox中).如果我现在再次单击它,复选标记将消失并且activeUpdate不会被调用.如果我再次单击,则会再次显示检查并且同时进行所有呼叫,始终仅在添加检查时,一次性删除它需要2次点击!

我究竟做错了什么？

更新:人员列表的示例JSON(使用curl查询REST API ...)

[
    {
        "active": 1,
        "id": 1,
        "name_first": "Ed",
        "name_full": "Tech, Ed",
        "name_last": "Tech",
        "name_middle": null,
        "uri": "/sips/api/staff/1",
        "username": "admin"
    },
    {
        "active": 1,
        "id": 252,
        "name_first": "test",
        "name_full": "aatest, test",
        "name_last": "aatest",
        "name_middle": "something",
        "uri": "/sips/api/staff/252", …

我有一个2个范围的控制器:

app.controller('search', function($scope) {
    $scope.value1 = '';
    $scope.value2 = 'Some text' + $scope.value1;
}

和输入字段:

<input type="text" ng-model="value1">

当我使用输入字段(有效)更改value1时,value2不会更新.我怎样才能做到这一点？

在我看来,我有这条线:

<input placeholder="Search" type="text" ng-change="searchChange()" ng-model="mySearch" ng-model-options="{debounce: 1000}">

然后我的控制器里面有:

angular.module('app.controllers', [])

.controller('listViewCtrl', ['$scope', '$stateParams', '$http',
function ($scope, $stateParams, $http) {

    $http.get('http://www.domain.co.uk/api/search.php').
        then(function(response) {
            $scope.food = response.data;
        });

    $scope.searchChange = function() {
        console.log($scope.mySearch);   
    };         

}])

但这给了我"未定义".

如何在控制器中引用mySearch输入字段的值？

我正在尝试使用Angular指令创建一个ajax搜索框.我仍然开始匹配数据,这就是我所拥有的:

function hintSearch () {
    return {
        restrict: 'E',
        replace: true,
        template: '<div class="search_hint"><label><input type="search" ng-change="query()"></label><ul class="results"><li class="hint" ng-repeat="hint in hints | limitTo: 8" ng-bind="hint" ng-click="hint_selected(hint)"></li></ul></div>',
        scope: {},
        link: function(scope, element, attrs){
            scope.hints = ["client1", "client2"];
            scope.hint_selected = function(){
                console.log("hint selected");
            }
            scope.query = function(){
                console.log("query php");
            scope.hints = ["client1", "client2", "client3"];
            }
        }
    }
}

问题是,ng-change给我一个错误.有ng-click或ng-keypress它完美的工作,所以没有意义!有任何想法吗？

这是它抛出的错误:

angular.js:13550 Error: [$compile:ctreq] http://errors.angularjs.org/1.5.5/$compile/ctreq?p0=ngModel&p1=ngChange
    at Error (native)
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js:6:412
    at gb (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js:71:251)
    at n (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js:66:67)
    at …

传递给child指令的ng-model上的角度ng-change

基本上,我希望能够将ng-model从父指令传递给子指令.我可以只使用双向绑定值,但是后来我无法在子元素的父指令中使用ng-change.我也可以使用ng-click,但这不适用于非单击更改(例如文本区域而不是复选框).所以我想知道是否有一种方法允许自定义指令具有类似于输入,按钮,文本区域和其他html元素的ng-model/ng-change对.我想避免使用emits,ons,watch,传递回调等.我只是希望能够在自定义指令而不是输入上执行[input type ="checkbox"ng-model ="ngModel"].

父模板

<child ng-model="x" ng-change="x()"></toggle>

家长指令

$scope.x = function() {console.log('hi')};

儿童模板

<div>
     <input type="checkbox" ng-model="ngModel">
</div>

儿童指令？

$scope.ngModel = $element.controller('ngModel'); 

我的角度版本是1.4.8 btw.

谢谢 :)