标签: angularjs-ng-change

http://plnkr.co/edit/RP9SpO1qGjn5Ua6pZJ3D?p=preview

JS

angular.module("sampleapp", []).controller('samplecontroller', function($scope,$rootScope) {
  $scope.radii = [
    {id:.25, checked:false, name:"1/4 Mile"},
    {id:.5, checked:false, name:"1/2 Mile"},
    {id:1, checked:false, name:"1 Mile"},
    {id:2, checked:true, name:"2 Mile"},
    {id:3, checked:false, name:"3 Mile"},
    {id:4, checked:false, name:"4 Mile"},
    {id:5, checked:false, name:"5 Mile"}
];

$scope.handleRadioClick = function(){
    alert();

};
});

和HTML

          <div class="radio">
            <label>
              <input type="radio" name="radius"

                   ng-change="handleRadioClick()"
                   ng-checked="radius.checked">

              {{radius.name}}

            </label>
          </div>

      </li>

注意根据半径范围结构检查"2 Mile"无线电输入.为什么ng-change不会触发功能？

如果我添加ng-model,函数会触发,但ng-checked不起作用.

当以编程方式更改模型时调用角度的ng-change时出现问题.

$scope.sendMessage = function() {
    $scope.message = "Message sent";
}

$scope.confirmed = true;
$scope.mySelectBox = $scope.selects[1];

<select ng-model="mySelectBox"
        ng-options="item.name for item in selects track by item.name"
        ng-change="sendMessage()">
</select>

这是代码示例:http://plnkr.co/edit/R4MO86ihMrauHXhpCMxi？p = preview

消息应该为null,因为sendMessage不应该调用.模型以编程方式更改.

一直在环顾四周,但我似乎找不到任何好的资源.有一个应用程序,我想在用户离开文本框/区域等时更新数据库中的数据,想象我可能会使用ngfocus事件执行此操作,但我还需要获取哪个字段已触发更新.

不确定如何继续,可能不是事件是使用ngfocus最好的事情.也许创建一个新的指令或者如果可能的话扩展ngfocus.任何建议表示赞赏.

我有一个文本框.我想在用户在文本框中填写"n"或更多字符时调用控制器内的方法.

有人可以给我指点如何处理这个问题吗？

谢谢

//main controller
angular.module('myApp')
.controller('mainCtrl', function ($scope){
    $scope.loadResults = function (){
        console.log($scope.searchFilter);
    };
});

// directive
angular.module('myApp')
.directive('customSearch', function () {
    return {
        scope: {
            searchModel: '=ngModel',
            searchChange: '&ngChange',
        },
        require: 'ngModel',
        template: '<input type="text" ng-model="searchModel" ng-change="searchChange()"/>',
        restrict: 'E'
    };
});

// html
<custom-search ng-model="searchFilter" ng-change="loadResults()"></custom-search>

这是一个简化的指令来说明.当我输入到输入,我预计console.log在loadResults注销正是我已经输入.它实际上记录了一个字符,因为loadResults它正好在searchFilter主控制器中的var从指令接收新值之前运行.但是,在指令内部记录,一切都按预期工作.为什么会这样？

我的解决方案

得到什么在我的简单的例子与ngChange发生的事件的了解之后,我意识到我的实际问题的事实,我其实传入ngModel是一个对象,其属性我改变,也说我有点复杂使用此指令的表单验证作为输入之一.我发现在指令中使用$ timeout和$ eval解决了我所有的问题:

//main controller
angular.module('myApp')
.controller('mainCtrl', function ($scope){
    $scope.loadResults = function (){
        console.log($scope.searchFilter);
    };
});

// directive
angular.module('myApp')
.directive('customSearch', function ($timeout) {
    return { …

我有一个简单的表,每行有三行和两个值 - 日期和状态:

<tbody>
   <tr>
      <td>Red</td>
        <td class="lastModified">{{item.redDate}}</td>
        <td class="status"> 
            <select id ="red" class="form-control" ng-change="update();" ng-model="item.redStatus">
              <option value="" disabled="" selected="" class="ng-binding">Please select the value</option>
              <option ng-selected="step.value === item.redStatus"  ng-repeat="(key, step) in steps">{{ step.title }}</option>
            </select>
       </td>
   </tr>
   <tr>Green</tr>
   <tr>
     ....
   </tr>                    
</tbody>

因此,红色,绿色和蓝色的简单日期和状态值.一个在下拉列表中 - 状态,第二个 - 只是输出日期.

在更改选择值时 - 我需要使用今天的日期更新日期.

 `$scope.item.redDate = new Date();`

是否有可能有一个功能,如ng-change="change();" 无法发送与更改ID ...

试图找出当绑定的选定选项不再存在时模型不更新的原因.我希望模型的属性更新为undefined/null/empty字符串.

情况:一个select驱动另一个select使用过滤器.选择完成后,转到原始select选项并选择其他选项.Filter将按select预期删除第二个选项,但第二个选项的model属性select将保持不变.

问题:当你去传递模型时,它将填充坏/先前的值.此外,使用Angular验证,select需要......表单在技术上是"有效的",因为模型具有属性的值(先前的值).

HTML:

<select name="Category" ng-model="selectedCategory" 
       ng-options="item.name as item.name for item in categories">
   <option value="">All Categories</option>
</select>

<select name="SubCategory" ng-model="selectedSubCategory" 
       ng-options="item.name as item.subCategory for item in categories | filter:selectedCategory">
  <option value="">All SubCategories</option>
</select>

模型:

app.controller('MainCtrl', function($scope) {
   $scope.categories = [{
      "id": "1",
      "name": "Truck",
      "subCategory": "Telescope"
   }, {
      "id": "2",
      "name": "Truck",
      "subCategory": "Hazmat"
   }, {
      "id": "3",
      "name": "Van",
      "subCategory": "Mini"
   }];
});

我相当肯定我可以将ng-change功能绑定到第一个以强制它更新模型,但是有更好的方法吗？ …

我正在使用AngularJS和Ionic Framework.我正在开发一个实时通信应用程序.

我有一个范围滑块离子文档.如果我使用ng-change每一步调用我的回调,但我只想传输最终结果.在桌面上我可以使用ng-mouseup但我找不到移动设备上的解决方案.创建延迟对我来说不是解决方案,因为它必须快速.

我试图有一种方法来捕捉 ngRepeat 内部变量的变化，以便我可以修改其他属性。所以我有这个 HTML：

<tr ng-repeat="variable in variables">
  <td>
    <div ng-if="....">
      <textarea ng-model="variable.u_field_values" ng-change="onChange(variable)">

每当他们修改该文本区域中的文本时，我都需要更新正在使用的当前变量的另一个值。不过，更改方法似乎永远不会被解雇。